我会在路径中绘制标记,但不幸的是只打印线条。
我在 defs
中定义标记,然后在我的路径中通过 id 调用它,但标记不起作用。
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
<defs>
<style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
<marker id='start' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'>
<!-- triangle pointing right (+x) -->
<path d='M0,0 V2 L1,1 Z' fill="orange"/>
</marker>
</defs>
<title>line</title>
<path id="path7" class="cls-1" d="M202,67.72,329.33,215.86" transform="translate(-200.1 -66.09)" marker-mid="url(#start)" />
</svg>
最佳答案
路径中没有顶点
The marker is rendered on every vertex other than the first and last vertices of the path data. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-mid
您的路径是d="M202,67.72,319.33,215.86"
,这只是两点。因此 marker-mid
将不会显示。
不确定,但我猜你真正需要的是marker-end
?
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
<defs>
<style>.cls-1{fill:none;stroke-width:5px;}.cls-1,.cls-2{stroke:#a15256;}.cls-2{fill:#fff;}.cls-3{isolation:isolate;font-size:42.79px;font-family:ArialMT, Arial;}</style>
<marker id='start' orient="auto" markerWidth='2' markerHeight='4' refX='0.1' refY='1'>
<!-- triangle pointing right (+x) -->
<path d='M0,0 V2 L1,1 Z' fill="orange"/>
</marker>
</defs>
<title>line</title>
<path id="path7" class="cls-1" d="M202,67.72,319.33,215.86" transform="translate(-200.1 -66.09)" marker-end="url(#start)" />
</svg>
关于javascript - 在路径中绘制 svg 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57379467/