代码之家 › 专栏 › 技术社区 › Joshua Dance Muhammad Raheel

为什么在应用SVG linearGradient时,SVG线会消失?[副本]

svg javascript

-1

Joshua Dance Muhammad Raheel · 技术社区 · 2 年前

更新:变得更奇怪了。如果直线是水平的,它会消失,但如果它有任何坡度,它会显示得很好。看看id=“horizontalNoShow”,如果将其更改为y1和y2不相等,它将进行渲染。

我认为这是一个错误,但不确定。发生在Chrome和Safari中。正在尝试将SVG linearGradient添加到线条中。

我可以将它添加到所有其他形状中,但当我将它添加在线上时,线就会消失。仍然显示在DOM中,但由于某种原因没有被渲染?

我有一条紫色的线,看起来很棒。我有一个带有渐变笔划的矩形,显示得很好。但是当我把渐变笔划和线条结合起来时,它就不会显示出来。

    <svg width="" height="">
      <defs>
        <linearGradient id="FirstGradient" >
          <stop offset="0%" style="stop-color:#FF00FF"/>
          <stop offset="100%" style="stop-color:#FFFF00"/>
        </linearGradient>
      </defs>
      <line id="someSlopeShow" x1="50" y1="70" x2="250" y2="71"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
      <line id="horizontalNoShow" x1="55" y1="90" x2="255" y2="90"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
      <rect id="exampleTwoRectSVG"
        x="10" y="10"
        width="200" height="100"
        stroke="url(#FirstGradient)"
        stroke-width="15"
        fill='transparent'
        stroke-dasharray="110 20"
      />
    </svg>

1 回复 | 直到 2 年前

Joshua Dance Muhammad Raheel 2 年前

找到了答案。的规范 线性渐变 显示使用对象边界框。 https://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits

然而,在最后一段中:

“当适用元件没有宽度或没有高度, 例如水平或垂直线,即使该线具有实际厚度当由于具有自笔划宽度以来的非零笔划宽度而观看时在边界框计算中被忽略 。当适用的元素没有宽度或高度,objectBoundingBox为指定,则给定的效果(例如,梯度或滤波器)将被忽略。“

这是有道理的,因为盒子需要一个区域来工作。水平线没有任何面积。一个巧妙的解决方法是,你可以在坐标上加上.001,给它一小块面积。

<svg width="" height="">
      <defs>
        <linearGradient id="FirstGradient" >
          <stop offset="0%" style="stop-color:#FF00FF"/>
          <stop offset="100%" style="stop-color:#FFFF00"/>
        </linearGradient>
      </defs>
      <line id="horizontalNoShow" x1="55" y1="90" x2="255" y2="90.001"
        stroke="url('#FirstGradient')"
        stroke-width="6"
      />
</svg>

如果我正确理解这一点,就意味着没有以下功能:

线性渐变
圆形渐变
图案
clipPath
面具
滤器

如果你的线是水平的或垂直的,就会起作用。

我很难在StackOverFlow上找到答案,因为我没有意识到是水平线或垂直线造成了问题。

这些问题涵盖了以下方面: How to add a linearGradient to a vertical SVG line

SVG Line with Gradient Stroke Won't Display if vertical or horizontal (这个问题名称不太好。直白不意味着很多东西。)

SVG遮罩也不适用于垂直线或水平线: SVG Mask makes line disappear

feDropshadows也不适用于垂直线或水平线: Adding feDropShadow to a vertical line in SVG makes it disappear