0

Mozilla Developer ページから、プロパティを使用して CSS の SVG マスクを再作成しようとしていmaskます。

CSS:

#canvasPreview {
    mask: url(images/masks/circle2.svg#circleMask);
}

HTML:

<img id="canvasPreview" src="placehold.it/100x100"></img>

SVG:

<svg>
    <mask id="circleMask" maskContentUnits="objectBoundingBox">
        <circle cx="50" cy="50" r="50" fill="white" />
    </mask>
</svg>

SVG は外部参照され、MDN の例のように埋め込まれません。私はそれを埋め込もうとはしていませんが、それが役立つ理由がわかりません。はっきりしないことがいくつかあります。

  1. CSS で、URL の後に #circleMask 識別子を付けているのはなぜですか? それを削除しても私のコードは機能せず、MDN サイトの仕様に含まれていることがわかったので、そこに入れました。

  2. 私のSVGは正しいですか？<mask>タグidとobjectBoundingBox属性を使用する必要がありますか? それらは何に使用されますか？

4

1 に答える 1

0

URL の # の後の部分は、マスクの ID と同じである必要があります。だからあなたはその部分を正しく持っています。

必要に応じて objectBoundingBox を使用できますが、コンテンツが間違っているようです。マスク半径は、マスクしているオブジェクトのサイズの 50 倍です。おそらくあなたは50％を意味していました。cx と cy も同様です。

于 2012-10-24T12:13:14.270 に答える