笔触网址在Edge和IE 11 SVG中不起作用 [英] stroke url not working in Edge and IE 11 SVG

问题描述

我的svg有两条路径，一条对角线和一个小圆圈.它们的笔触颜色参考位于defs stroke ="url(#myGradient)" 中的linearGradient.在Chrome，Firefox和Safari上，将显示小圆圈.但是在Edge和IE 11上，小圆圈没有将url路径连接到线性渐变的id，如果我将其stroke属性更改为一种颜色，则可以渲染它，但是我想使用url值.

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>

这里也是codepen链接

推荐答案

每SVG规范

当适用元素的几何没有宽度或没有高度时(例如水平或垂直线的情况)，即使当该线由于具有非零值而具有实际的粗细时，也不应使用关键字objectBoundingBox笔划宽度，因为在边界框计算中将忽略笔划宽度.如果适用元素的几何没有宽度或高度，并且指定了objectBoundingBox，则将忽略给定的效果(例如，渐变或滤镜).

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，因此，如果元素没有宽度或高度，则渐变将不适用.

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

该元素的实际宽度和高度为5.62e-5,0.03275.似乎Firefox和Chrome认为该值足够非零以呈现渐变，但IE/Edge却不然.但是，您正在玩​​火，期望值很小.

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.

如果要在圆上渲染渐变，请使用circle元素绘制一个圆，然后将渐变应用于圆的填充.

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.

这篇关于笔触网址在Edge和IE 11 SVG中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！