包括线性梯度X / Y中的笔画宽度

我将它添加到笔划中，它不会像应用填充时那样显示 . 我认为这是问题：objectBoundingBox在本节的底部，它说：

当适用元素的几何体没有宽度或没有高度时，不应使用关键字objectBoundingBox，例如水平或垂直线的情况，即使由于具有非零笔划宽度而在查看时线条具有实际厚度时也是如此因为边界框计算忽略了笔划宽度 . 当适用元素的几何体没有宽度或高度且指定了objectBoundingBox时，将忽略给定的效果（例如，渐变或滤镜） .

让我演示给你看：

这是一个带填充的矩形：

<svg name="scaled1box" overflow="visible" x="12.35" y="12.35" fill="url(#fillLinGrads0sp5)">
        <defs>
          <linearGradient id="fillLinGrads0sp5" x1="0" y1="0" x2="1" y2="1" >
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

但是用中风代替：

<svg name="scaled1box" overflow="visible" x="12.375" y="12.375"  fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
        <defs>
          <linearGradient id="strokeLinGrads0sp5" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

注意在具有行程的那个中，“45度”角度略微偏离 . 我认为这与边界框仅用于路径，而不是路径笔划宽度这一事实有关 .

好的 . 怎么办？我仍然需要它为路径笔划宽度 .

所以我尝试设置相对坐标，但无法弄清楚这是如何工作的 . 意思是我设置了将w = 72，h = 144的矩形增加到w = 144的平方，h = 144，并将 x2="1" 和 y2="1 “的终点设置为它们相对于原始边界框的位置 - 所以 x2="1.1736" 和 y2="1.1736 “（1.1736 =新的w / h为169（行程宽度为144 25）除以旧的w / h为144.） . 没有骰子 . 然后我尝试偏移起点和终点以首先考虑变换，然后考虑缩放 . 再一次，没有骰子 .

所以我去搜索 . This seemed really promising，直到我无法弄清楚他的变量，比如eps等 .

所以，当其他所有方法都失败时，我只是试着用数字来捣乱 . 这似乎很接近 .

<svg name="scaled1box" overflow="visible" x="12.375" y="12.375" fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
        <defs>
          <linearGradient id="strokeLinGrads0sp5" x1="-0.087" y1="-0.24" x2="1.17" y2="1.17">
            <stop offset="0" stop-color="#7030A0" />
            <stop offset="0.49" stop-color="#7030A0" />
            <stop offset="0.5" stop-color="#FFFFFF" />
            <stop offset="0.51" stop-color="#0070C0" />
            <stop offset="1" stop-color="#0070C0" />
          </linearGradient>
        </defs>
        <path d="M0,0L72,0L72,144L0,144Z" />
      </svg>

但我不知道如何计算所有起点/终点 . 它真的只是四处乱转 .

选项：

• 放弃并将笔划转换为路径 .

• 从您那里获得一些帮助，找出如何使用初始值转换相对或绝对点值以适应BB笔划宽度 .