中风 url 在 Edge 和 IE 11 SVG 中不起作用

Question

我有一个 svg 有两条路径，一条对角线和一个小圆圈。它们的描边颜色参考了 defs stroke="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>

Here's codepen link as well

Answer 1

每The SVG specification

Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

linearGradient 的默认 gradientUnits 是 objectBoundingBox，因此如果元素没有宽度或高度，则不会应用渐变。

元素实际宽高为5.62e-5,0.03275。似乎 Firefox 和 Chrome 认为它足够非零以呈现渐变，但 IE/Edge 不相信。然而，你是在玩火，期望非常小的值起作用。

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

中风 url 在 Edge 和 IE 11 SVG 中不起作用

stroke url not working in Edge and IE 11 SVG

html

internet-explorer

svg

microsoft-edge