Question

我想使用CSS将对角线阴影添加到SVG中的多边形。我知道您可以使用模式，但是当有太多不同的模式时，我会担心性能问题，这就是为什么我宁愿使用CSS。我发现了repeating-linear-gradient，但无法使其在svg元素上工作。那可能吗？如果没有，css中还有其他方法可以向svg元素添加对角阴影吗？

Answer 1

通常，浏览器目前不支持向SVG元素添加CSS渐变。

您需要改用SVG <linearGradient>元素。

这是一个例子。

<svg width="300" height="300">
  <defs>
    <linearGradient id="hatch1"
                    gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="10" y2="10"
                    spreadMethod="repeat">
      <stop offset="0%" stop-color="transparent"/>
      <stop offset="90%" stop-color="transparent"/>
      <stop offset="90%" stop-color="green"/>
      <stop offset="100%" stop-color="green"/>
    </linearGradient>
  </defs>

  <circle cx="150" cy="150" r="100" fill="url(#hatch1)" stroke="blue"/>
</svg>

SVG元素的对角阴影线

1 个答案: