Question

我已经阅读了关于StackOverflow的许多类似文章，但是我还没有找到可行的解决方案。

经过研究和测试，我发现由于某些原因，Edge无法处理SVG的<path>元素指向<linearGradient>元素的相对ID路径。这指向#default。如果我将其更改为<path fill="url(#default)">而不是<path fill="url(page-path#default)">的位置，则它可以工作，但随后在所有其他浏览器中都中断。

也许这与Angular / routing有关？当我将相同的SVG放入诸如JSBin之类的东西时，它显示得很好。

是否可以通过某种方式内联提供linearGradient样式？因此它们会位于fill属性本身内部，而不是位于<defs>中自己的元素集吗？

任何帮助将不胜感激。

SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 210 205.5" style="transition: all ease .3s;">
  <defs>
    <linearGradient id="default" x1="105" y1="0.5" x2="105" y2="205" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#999"/>
      <stop offset="0.515" stop-color="#979797"/>
      <stop offset="0.7" stop-color="#909090"/>
      <stop offset="0.832" stop-color="#858585"/>
      <stop offset="0.939" stop-color="#747474"/>
      <stop offset="1" stop-color="#666"/>
    </linearGradient>
  </defs>
  <g id="8ec33363-ff84-4474-b974-7d4017c32667" data-name="Layer 4">
    <path  fill="url(#default)" d="M1,179.031C1,192.171,1.465,205,18.969,205H190.031a17.877,17.877,0,0,0,11.086-3.737,18.965,18.965,0,0,0,8.383-15.732V17.766A17.286,17.286,0,0,0,192.234.5H17.766A17.286,17.286,0,0,0,.5,17.766Zm26.5-6.5V46.5h155V172.531a4.975,4.975,0,0,1-4.969,4.969H32.469A4.975,4.975,0,0,1,27.5,172.531Z" stroke="#777" stroke-miterlimit="10" opacity="0.75"/>
    <path d="M72.166,111.334A11.833,11.833,0,1,1,60.333,99.5,11.832,11.832,0,0,1,72.166,111.334Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M117.166,111.334A11.833,11.833,0,1,1,105.333,99.5,11.832,11.832,0,0,1,117.166,111.334Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M162.166,111.334A11.833,11.833,0,1,1,150.333,99.5,11.832,11.832,0,0,1,162.166,111.334Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M72.166,148.709a11.833,11.833,0,1,1-11.833-11.833A11.832,11.832,0,0,1,72.166,148.709Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M117.166,148.834A11.833,11.833,0,1,1,105.333,137,11.832,11.832,0,0,1,117.166,148.834Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M162.166,148.959a11.833,11.833,0,1,1-11.833-11.833A11.832,11.832,0,0,1,162.166,148.959Z" fill="#e8b501" stroke="#f48003" stroke-miterlimit="20" opacity="0.3"/>
    <path d="M172.166,22.334A11.833,11.833,0,1,1,160.333,10.5,11.832,11.832,0,0,1,172.166,22.334Z" fill="#777"/>
    <path d="M59.166,22.334A11.833,11.833,0,1,1,47.333,10.5,11.832,11.832,0,0,1,59.166,22.334Z" fill="#777"/>
    <rect x="45.5" y="19.334" width="118" height="6" rx="3" ry="3" fill="#fff"/>
    <rect x="48.5" y="64.75" width="113" height="17" rx="8.5" ry="8.5" fill="#5e9beb" stroke="#578fd8" stroke-miterlimit="20"/>
  </g>
</svg>

SVG linearGradient在Microsoft Edge（Angular应用）中不起作用

0 个答案: