在 lineargradient X/Y 中包含笔画宽度

Question

我运行遇到线性渐变的问题，因为当我将它添加到笔划时，它不会像作为填充应用时那样显示。我认为这是问题所在：objectBoundingBox 在本节的底部，它说：

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

让我告诉你：

填充后的矩形如下所示：

<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 = 169 的新 w/h（笔画宽度为 144+25）除以 144 的旧 w/h。）。没有骰子。然后我尝试偏移起点和终点以首先考虑变换，然后是比例。同样，没有骰子。

所以我去寻找。 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>

但我不确定如何计算所有 start/end 点。真的是瞎胡闹。

选项：

放弃并将笔划转换为路径。
请您帮忙弄清楚如何翻译 relative 或使用初始值容纳 BB + 笔画宽度的绝对点值。

Answer 1

我找到了一个 nice bit of code here 可以帮助压缩原始角度，效果非常好。

在 lineargradient X/Y 中包含笔画宽度

include stroke-width in lineargradient X/Y

svg

linear-gradients