0

以下のコーディングは IE で正常に動作します。しかし、矢印マークはクロームで左向きになっています。

正確な問題は何ですか。pls、誰か教えてください。?

 <html>
 <body>
 <svg viewBox="0 0 1000 1000">
 <defs>
   <marker id = "EndMarker" viewBox = "0 0 10 10" refX = "5" refY = "5" 
 markerWidth ="3" markerHeight = "3" stroke = "green" stroke-width = "1" fill = "none" 
 orient = "auto">
        <polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>          
</marker>
<marker id="line10_Tail" viewBox="0 0 10 10" refX="5" refY="5" `markerWidth="3"
markerHeight="3" stroke-width = "1" orient="auto">
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
</marker>
</defs>
<polyline points="300,100 300,200 200,200 100,200 100,100 150,100" fill = "none" 
stroke= "black" stroke-width = "5"  marker-end = "url(#EndMarker)"/>
<path fill="none" marker-end="url(#line10_Tail)" stroke="black" stroke-width="5"  
d="M500,445 S450,445,250,444 S1,443 1,443"/>
<polyline fill="black" stroke="black" points="0,0 10,5 0,10 0,0"/>
 </svg>
</body>
</html

対応する jsfiddle は次のとおりです。

4

1 に答える 1

0

S2行目は、大文字の後に2つのX,Y座標が続く「Shorthand Smooth Cubic Bezier CurveTo」を使用しています。

d="M 500,445  S 450,445,250,444  S 10,443 10,443"

あなたが経験しているのは数学の問題です。空間内の点から始まり、点にA向かって曲がりB、空間内の最終点で終わる線を作成しましたCよね? あなたが与えている座標BはCと 同じです。線が曲がってB から折り返して点で終わると予想される場合、Bあるブラウザー (IE) は矢印を左に向けるために大まかな推測を行い、別のブラウザー (Chrome) は矢印を右に向けるために大まかな推測を行う可能性があります。

解決策は 2 つあります。1 つは、curveTo ポイントを先端から遠ざけるだけで、カーブと先端の間に少しスペースができるため、どちらの方向に向かっているのかあいまいさがなくなります。

d="M 500,445  S 450,445,250,444  S 11,443 10,443"

さらに良いことに、これらの線は直線であるため、直線ハンドルを使用できます。

d="M 500,445  L 250,444  L 10,443"

パス データに関する W3C の仕様の詳細については、http ://www.w3.org/TR/SVG11/paths.html#PathData を参照してください。

于 2013-10-14T21:17:38.033 に答える