2016-03-29 6 views
0

この質問には多くの形がありますが、どれもこの単純なケースをカバーしていないようです:私はSVGに2行あり、 。私は他のポストから複数のトリックを試みましたが、何も動作していないようです。ここには私が行方不明のものがあります。ここで単純なテストパス内に2ストロークのSVGは幅が異なります

は、私が再現できるこのバグの最も単純な形式である:

<!DOCTYPE html> 
<html> 
<body> 
<svg width="120px" height="410px" viewBox="0 0 120 410"> 
    <g id="rooms" stroke-width="8" stroke="#979797"> 
     <path d="M0,0 L40,0"></path> 
     <path d="M0,20 L40,20"></path> 
    </g> 
</svg> 
</body> 
</html> 

そしてここでは、描画結果である: enter image description here

私は他のSOの記事を使用しようと、a fiddleをも作成しました提案は効果がない。また、Safari、Chrome、Firefoxでこれをテストしたところ、すべて同じ結果になりました。

私はこのような単純なことがこの種の描画バグを持っていることを少し気にしています。私は非常に明白な何かを逃しているに違いない私はまた、PATHの代わりにLINEを使ってみると、正しく動作します。これはパスに関連しているようです。

答えて

0

これは確かにnoobの間違いでした。ストークの幅がラインの中心にあることは明らかではなかった。私のviewBoxの端に沿って描かれたすべてのパスが効果的にクリップされました。

TL; DR:ドローしない0,0

関連する問題