SVG过滤器不适用于Firefox中的marker-end

时间:2017-07-17 09:21:37

标签: html google-chrome firefox d3.js svg

我有以下svg代码在Chrome中运行良好,但该标记未在Firefox中显示。有人知道为什么吗?谢谢!

<svg id="exhibition_svg" width="1235" height="487" class="exhibitionSvg"
  viewBox="-139.2135523613963,-60,806.4271047227926,318"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <filter id="bgPoint" width="800%" height="800%" x="-200%" y="-200%">
      <feGaussianBlur stdDeviation="1" width="800%" height="800%" x="-300%" 
        y="-300%">
      </feGaussianBlur>
    </filter>

    <marker id="app5end-arrow-active" viewBox="0 0 14 14" refX="7" refY="7"
      markerWidth="3" markerHeight="3" orient="auto" filter="url(#bgPoint)">
      <g>
        <circle cx="7" cy="7" r="5" fill="#122C34" stroke="#3AD5C9" stroke-width="1">
        </circle>
        <circle cx="7" cy="7" r="2" fill="#122C34" stroke="#3AD5C9" stroke-width="2">
        </circle>
      </g>
    </marker>

  </defs>

  <g>
    <path class="connect_line" d="M245,153L250,153L283,153L283,153"
      stroke="#0F364B" fill="none" stroke-width="7" rotate="auto"
      marker-end="url(#app5end-arrow-active)"
      marker-start="url(#app5end-arrow-active)">
    </path>
  </g>

</svg>

我也把它放在codepen上:https://codepen.io/rrandom/pen/yXrRZQ,请看看

0 个答案:

没有答案