stroke url not working in Edge and IE 11 SVG

问题

I have an svg that has two paths, a diagonal line and small circle. Their stroke color are referenced to linearGradient located in defs stroke="url(#myGradient)". On Chrome, Firefox and Safari, the small circle renders. But on Edge and IE 11 the small circle is not connecting the url path to the id of the linear gradient, if I change it's stroke attribute to a color then it renders, but I want to use the url value.

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

回答1:

Per 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.

The default gradientUnits for a linearGradient are objectBoundingBox therefore the gradient won't apply if the element doesn't have width or height.

The element's actual width and height is 5.62e-5,0.03275. It seems like Firefox and Chrome believe that's sufficiently non-zero to render the gradient but IE/Edge does not. You are however playing with fire expecting really tiny values to work.

If you want to render a gradient over a circle, draw a circle with the circle element and apply the gradient to the circle's fill.

来源：https://stackoverflow.com/questions/59432535/stroke-url-not-working-in-edge-and-ie-11-svg