1
私はSVG clipPathの整列と変換に問題があります。ここ
は私のHTMLコードです：SVG clipPath座標の問題
<div class="box"></div>
<svg height="100%" width="100%" viewBox="0 0 600 600" >
<clipPath id="clipped">
<circle cx="100" cy="100" r="50"></circle>
</clipPath>
<circle cx="100" cy="100" r="50" fill="none" stroke="#000000"></circle>
</svg>
そして、ここでは、CSSです：
body{
margin:0;
padding:0;
}
.box{
position:absolute;
width:100%;
height:100%;
background:pink;
clip-path: url(#clipped);
-webkit-clip-path: url(#clipped);
}
あなたが私を見ることができるように私は同じXとYとのSVGとR.の内部に二つの円を持っていますSVG要素の幅が100％、高さが100％で、viewBox = "0 0 600 600"なので、svgの内容はブラウザウィンドウのサイズ変更によって変換されます。実際、devToolsで要素を調べると、両方の円の位置は同じですが、そのDIVのマスクされた領域は適切な場所にありません。私はviewBoxを削除すると、それはOKになりますが、私は自分のsvgが画面に合っているようにしたい。 ViewBoxがクリップパスに影響しないことが分かっているので、viewBoxを設定しても、両方の円の上の適切な場所にマスクされた領域を一致させるにはどうすればよいですか。
Here is the CodePen
ありがとうございます。
探している出力は何ですか？ SVGの本体は100％x 100％ですが、divは300px x 300pxしかないので、一致しません。 – Harry
@ハリーピンクの領域は、コードサンプルのストロークサークルと一致する必要があります。実際にはdivの幅や高さは関係ありません。結果には影響しません。 –
これは私の言っていることと一致しません。その理由は、あなたのSVGがスケーリングされているのに対し、あなたの 'div'はスケーリングされていないからです。 – Harry