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

Posted 2023-03-28

【中文标题】中风 url 在 Edge 和 IE 11 SVG 中不起作用

【英文标题】：stroke url not working in Edge and IE 11 SVG

【发布时间】：2020-04-13 09:32:16

【问题描述】：

我有一个 svg，它有两条路径，一条对角线和一个小圆圈。它们的描边颜色参考位于 defs stroke="url(#myGradient)" 中的线性渐变。在 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"   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- 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- 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】：

每The SVG specification

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

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

元素的实际宽度和高度为 5.62e-5,0.03275。似乎 Firefox 和 Chrome 认为渲染渐变足够非零，但 IE/Edge 则不然。但是，您正在玩​​火，期望非常小的值起作用。

如果要在圆形上渲染渐变，请使用圆形元素绘制圆形并将渐变应用于圆形的填充。