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>

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

选项：

放弃并将笔划转换为路径。
从您那里获得一些帮助，以找出如何翻译亲戚或亲戚使用初始值来适应BB +笔划宽度的绝对点值。

Answer 1

我发现了一个nice bit of code here，可以压扁像护身符一样起作用的原始角度。

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

1 个答案: