代码之家 › 专栏 › 技术社区 › Todd Main

包括线条半径X/Y中的笔划宽度

linear-gradients svg

Todd Main · 技术社区 · 6 年前

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

选项:

放弃并将笔划转换为路径。
从你那里得到一些帮助,弄清楚如何翻译相对的或相对的使用初始值调整BB+笔划宽度的绝对点值。

1 回复 | 直到 6 年前

Todd Main 6 年前

我找到一个 nice bit of code here 这有助于挤压原来的角度,就像一个魅力。