8

<mask>レイヤーを<g>パス グループに適用できません。

に適用する<mask>と<rect>期待どおりに動作しますが、 で使用すると<g>グループ全体が消えます。

ここに私の文書があります

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600.000000 600.000000" preserveAspectRatio="xMidYMid meet">

     <defs>
        <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
            <rect fill="white" x="0" y="0" width="600" height="600"></rect>
            <circle cx="30" cy="30" r="20" fill="black"></circle>
            <circle cx="300" cy="300" r="200" fill="black"></circle>
        </mask>
     </defs>

     <rect fill="#FFFFFF" width="21456" height="21456" mask="url(#myMask)"></rect>

     <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#100059" stroke="none" mask="url(#myMask)"> <!-- a bunch of <path>s --> </g>

     <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#f542b3" stroke="none"> <!-- a bunch of <path>s --> </g>

</svg>

また、同じ結果で clip-path を使用して同様の方法を試しまし<rect>た<g>。maskまた、プロパティを個々の<path>要素に適用して同じ結果を得ようとしました

どんな助けでも大歓迎

4

1 に答える 1

8

この質問がまだアクティブであるかどうかは非常に疑問ですが、とにかく他の人のためにここに答えを出すと思いました.

要素のグループをすべて同時にマスクするには、それらをすべて<g></g>ブロック内に含めます。次に、いくつかのオプションがあります。

簡単なスタイル: すべての要素に不透明度を設定

グループ全体で不透明度やその他の変換を行っても問題ない場合は、<g></g>要素にクラスまたは ID を指定し、それに応じて CSS を設定します。

<g id="someGroup" class="class1 class2">
  <path ...></path>
  <circle ...></circle>
  <whatever ...></whatever>
</g>

とCSS（おそらくすべて一緒ではないかもしれませんが、アイデアは得られます）：

g,
#someGroup,
.class1,
.class2 {
    opacity: 0.5;
}


簡単ではありません: マスクを設定してグループに適用します (OP の質問)

最初に ID を使用してブロックにマスクを設定し、<defs></defs>それをグループに適用する必要があります。例：

<mask id="easyMask" x="0" y="0" width="1" height="1"
    maskContentUnits="objectBoundingBox">
    <rect x="0" y="0" width="1" height="1"
        style="fill-opacity: 0.25; fill: white;"/>
</mask>

OPはすでにそれを知っているように見えるので、マスキング要素については説明しません。ただし、完全なガイドについては、ここにアクセスして読んでください。とにかく、defs でマスクを設定したら、次のようにグループに適用します。

<g style="mask: url(#easyMask);">
  <path ...></path>
  <circle ...></circle>
  <whatever ...></whatever>
</g>

これの最も重要な部分は、style="mask: url(#easyMask);"実際にマスクを適用するスタイル要素です。グループのすべての子要素で機能しgます。#easyMaskマスクの ID と照合するだけで準備完了です。他のセレクター (など) で試したことはありません.class1が、# の存在は CSS スタイルのセレクターを示しているようです。実験してください:-)

于 2013-04-16T13:20:34.873 に答える