marker-end不遵循路径的方向

时间:2014-07-17 07:37:07

标签: svg

有代码:

<svg id="view-svg-problem"  xmlns="http://www.w3.org/2000/svg">
    <defs>
        <marker id='svg-marker-start' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='9' refY='5' class="svg-path-dec">
              <rect  x="1" y="1" width="8" height="8" />
              <text  x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">S</text>
        </marker>


        <marker id='svg-marker-end' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='5' refY='9' class="svg-path-dec">
              <rect  x="1" y="1" width="8" height="8" />
              <text  x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">F</text>
        </marker>
    </defs> 

    <path id="view-path-svg" class="svg-path" marker-start="url(#svg-marker-start)" marker-end="url(#svg-marker-end)" d="M 655,343 Q747,317 705.5,311 Q664,305 708,292 Q752,279 713.5,254 Q675,229 711.5,212.5 Q748,196 706.5,189 Q665,182 687,157.5 Q709,133 679.5,126.5 Q650,120 663,106 T676,92"></path>
</svg>

结果如下图所示:

enter image description here

很容易看出marker-start与路径保持一致,但marker-end并不想。这个问题有解决方案吗?

0 个答案:

没有答案