例如,我有两个形状：圆形和矩形.我想将它们转换成一个数字.在svg代码中有没有办法做到这一点？
<svg width="400" height="400">
<defs>
<g id="shape" fill="none" stroke="red">
<rect x="40" y="50" width="40" height="70" />
<circle cx="50" cy="50" r="50" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="50" />
<use xlink:href="#shape" x="200" y="50" />
</svg>
像这样：
解决方法
你可以制作一个< mask>或者< clipPath>从两个形状然后用它来掩盖第三个形状.然后,您可以将投影应用于该投影.
<svg width="400" height="400">
<defs>
<clipPath id="shape">
<rect x="40" y="50" width="40" height="70" />
<circle cx="50" cy="50" r="50" />
</clipPath>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="3" dy="3"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<g filter="url(#shadow)">
<rect width="100%" height="100%" fill="red"
clip-path="url(#shape)"/>
</g>
</svg>
注意：如果您想知道为什么我们将阴影应用于父级< g>这是因为如果我们将它直接应用到< rect>,投影也会受到剪辑的影响.
