在线性渐变 X/Y 中包含笔画宽度

Question

我遇到了线性渐变的问题，当我将它添加到笔画时，它不会像作为填充应用时那样显示。我认为这是问题所在：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>

但我不确定如何计算所有起点/终点。真的只是胡闹。

选项：

1. 放弃并将笔画转换为路径。
2. 向您寻求帮助，以了解如何翻译相对或 使用初始值来适应 BB + 笔划宽度的绝对点值。

Answer 1

我找到了一个nice bit of code here，它有助于挤压像魅力一样起作用的原始角度。