带有href的LinearGradient到另一个不能在firefox上运行的linearGradient

时间:2016-06-30 11:58:01

标签: javascript svg

我有这个代码显示了一个使用href到另一个linearGradient的linearGradient。代码在chrome下工作正常,但在firefox下无法正常工作:

<svg version="1.1" id="main_page_assets" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" style="enable-background:new 0 0 29 17;" xml:space="preserve">
<defs> 
    <style>
          .cls-11{stroke:url(#linear-gradient-2);}
          .cls-12{stroke:url(#linear-gradient-3);}
    </style>
    <linearGradient id="linear-gradient-2" x1="15.46" y1="472.62" x2="85.46" y2="472.62" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stopColor="#2f343b"/>
      <stop offset="16%" stopColor="#c3c1b5"/>
      <stop offset="30%" stopColor="#bfbdb2"/>
      <stop offset="44%" stopColor="#b3b2a8"/>
      <stop offset="58%" stopColor="#a0a098"/>
      <stop offset="71%" stopColor="#848581"/>
      <stop offset="85%" stopColor="#616464"/>
      <stop offset="98%" stopColor="#363b41"/>
      <stop offset="100%" stopColor="#2f343b"/>
    </linearGradient>

    <linearGradient id="linear-gradient-3" x1="559.24" y1="552.74" x2="629.24" y2="552.74" gradientTransform="translate(-80.77 1487.36) rotate(-90)" href="#linear-gradient-2"/>

</defs>

    <title>09_activity_map_arrow</title>
    <line x1="0" y1="0" x2="200" y2="200" class="cls-12" />
</svg>

这是一个jsfiddle:

https://jsfiddle.net/omriman12/yeaumwLs/1/

0 个答案:

没有答案