Question

我试图用标记绘制两条线。代码在IE和Firefox中运行良好，但在Chrome中，标记不会自动旋转。我在代码中添加了orient =“auto”...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg"
x="0px"
y="0px"
width="1276.263px"
height="4300.399px"
viewBox="0 0 1276.263 4300.399"
enable-background="new 0 0 1276.263 4300.399"
xml:space="preserve"><metadata
 id="metadata993"><rdf:RDF><cc:Work
     rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
       rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
 id="defs991"><marker
   orient="auto"
   refY="0.0"
   refX="0.0"
   id="Arrow2Mend"
   style="overflow:visible;"><path
     id="path4320"
     style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
     d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
     transform="scale(0.6) rotate(180) translate(0,0)" /></marker></defs>
     <g
 id="subpath-container" /><path
 style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
 d="M 829.46676,422.03786 C 800.47569,434.92278 499.29067,1993.9982 499.29067,1993.9982"
 id="path5161" /><path
 style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Mend)"
 d="m 529.89236,1095.275 c -30.60169,70.867 70.86706,1003.4131 70.86706,1003.4131"
 id="path5277" />
</svg>

Answer 1

您的路径是退化的，即您已将它们写为立方贝塞尔曲线，但控制点位于同一位置，因此它们变为直线。

Chrome应该可以解决这个问题，但Chrome问题数据库中没有open bug这个问题。

与此同时，如果要绘制直线，请使用直线命令，如L或l。 Chrome会正确绘制正确定位的标记。

为什么标记方向=“自动”在Chrome中不起作用？

1 个答案: