当前位置: 代码迷 >> JavaScript >> svg. polyline元素怎么在始末加个圆点或箭头
  详细解决方案

svg. polyline元素怎么在始末加个圆点或箭头

热度:539   发布时间:2012-02-16 21:30:36.0
svg... polyline元素如何在始末加个圆点或箭头
polyline元素如何在始末加个圆点或箭头

就是起点哪里是个黑色的小圆点,结束那里是个箭头!!

求赐教!!

------解决方案--------------------
参见
http://apike.ca/prog_svg_patterns.html
http://www.w3.org/TR/SVG/painting.html
------解决方案--------------------
既然你不爱看文档,那我给你2个例子总行了吧?

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg id="root" width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>svg</title>
<defs>
<marker id="markerEndArrow"
viewBox="0 0 30 30" refX="10" refY="12.5"
markerUnits="strokeWidth" markerWidth="9" markerHeight="30"
orient="auto">
<path style="stroke-
width:1;stroke:black;fill:black;opacity:1" d="M0.3125 0.625 9.3125
12.625 0.3125 24.625 21.3125 12.625 Z" />
</marker>
</defs>

<line style="marker-end:url(#markerEndArrow);stroke-
width:5;stroke:brown;fill:none;" x1="325" x2="660" y1="535" y2="200"/>
<line style="marker-end:url(#markerEndArrow);stroke-
width:2;stroke:brown;fill:none;" x1="125" x2="560" y1="435" y2="100"/>

</svg>