stroke url在Edge和IE 11 SVG中不工作

Question

我有一个svg，它有两条路径，一条对角线和一个小圆。它们的笔画颜色引用了defsstroke=“url(#mygradient)”中的linearGradient。在Chrome，Firefox和Safari上，小圆圈呈现。但是在Edge和IE 11上，小圆圈并没有将url路径连接到线性渐变的id上，如果我将它的stroke属性更改为颜色，那么它就会呈现，但是我想使用url值。

div {
height: 100px;
width: 100px;
}

<div>
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
 
  <defs>
    <linearGradient id="myGradient">
      <stop offset="1" stop-color="green" />
    </linearGradient>
  </defs>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 26.4583 26.4583" version="1.1" id="svg8-cross-P1">
  <!-- doesn't render in Edge/IE11 -->
  <g class="animate__left-dot" fill-opacity="1" stroke="url(#myGradient)" stroke-width="2.6458" stroke-linecap="round" stroke-linejoin="round">
    <path d="m 6.4855042,19.986408 a 9.5368996,9.5368996 0 0 1 5.62e-5,-0.03275"></path>
  </g>
  <g fill="none" stroke-width="2.6458" stroke-linecap="round">
   <!-- renders -->
    <g stroke="url(#myGradient)" transform="translate(0 -.0191)">
      <path d="M 6.4855595,6.4855597 19.972772,19.972772" class="animate__right-line"></path>
    </g>
  </g>
</svg>
</div>

这里也有代码接口链接

Answer 1

按照SVG规范

当适用元素的几何图形没有宽度或高度（如水平线或竖直线的情况）时，不应使用关键字objectBoundingBox，即使由于笔画宽度为非零，因此边框计算忽略了笔画宽度，因此该线条在查看时具有实际厚度。当适用元素的几何图形没有宽度或高度，并且指定了objectBoundingBox，那么给定的效果（例如，梯度或过滤器）将被忽略。

linearGradient的默认gradientUnits是objectBoundingBox，因此如果元素没有width或Height则不应用梯度。

该元件的实际宽度和高度为5.62E-5,0.03275。Firefox和Chrome似乎都认为它的非零值足以渲染渐变，但IE/Edge却不是。然而，你是在玩火，期望真正微小的值起作用。

如果要在圆上呈现渐变，请使用circle元素绘制一个圆，并将渐变应用于圆的填充。