Question

有人可以帮我确定如何引用SVG标记的外部URL吗？这可能吗？这就是我所拥有的。

https://s3.amazonaws.com/dent-demo/app_assets/tasks/coordinate_plane/marker_left_with_defs.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <marker id="arrow-left" class="arrow" markerWidth="17" markerHeight="12" refX="16" refY="5.8" orient="auto" markerUnits="strokeWidth" viewBox="0 0 51 36">
      <line x1="2.7" y1="5.8" x2="16.3" y2="5.8"/>
      <path d="M6,10.1L2,6.2C1.8,5.8,1.7,5.6,1.9,5.2l4.3-3.7"/>
      <line x1="-361.8" y1="-132.8" x2="11.2" y2="-132.8"/>
      <path d="M-359.6-128.8l-4.3-3.7c-0.2-0.3-0.1-0.6,0.1-0.9l4-3.9"/>
    </marker>
  </defs>
</svg>

我的应用中的代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="line-wrapper">
  ....
  <path class="line" d="M40 380 L 125 40" marker-start="url(https://s3.amazonaws.com/dent-demo/app_assets/tasks/coordinate_plane/marker_left_with_defs.svg#arrow-left)"></path>
</svg>

JsFiddle：https://jsfiddle.net/vL0m8v42/4/

请注意，底部箭头仅显示我是否marker-start="url(#arrow-left-0)"。如何才能使用外部标记？

如何引用SVG标记的外部URL

0 个答案: