carriewild
New Member
I'm having trouble applying a \[code\]<mask>\[/code\] layer to a \[code\]<g>\[/code\] path group.When I apply my \[code\]<mask>\[/code\] to a \[code\]<rect>\[/code\], it works as expected, but when using it on a \[code\]<g>\[/code\], the entire group disappears.Here's my document\[code\]<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>\[/code\]I've also tried a similar method using clip-path with the same results - working with \[code\]<rect>\[/code\] but not \[code\]<g>\[/code\]. I've also tried applying the \[code\]mask\[/code\] property to individual \[code\]<path>\[/code\] elements with the same resultAny help appreciated