Html SVG屏蔽元素

我屏蔽了一个svg，所以它有一个背景色，只有徽标被屏蔽了。我想用它作为全宽菜单背景。 这是我复制想法的那支笔：

在笔中，他只使用文本，但我想使用我以前在illustrator中制作的svg图像

希望有人能帮助我

代码如下：

svg{
宽度：100%；
身高：继承；
}
svg文本{
文本锚定：中间；
}
svg#alpha{
填充物：灰色；
}
svg#文本{
字母间距：-4px；
字号：8em；
字号：800；
}
svg#字幕{
字母间距：4px；
字距：0.25em；
字号：1.5em；
字体大小：400；
文本转换：大写；
}
svg#基础{
填充：黑色；
-webkit掩码：url（#掩码）；
掩码：url（#掩码）；
}

最初，svg中的

元素的位置与

为了更容易对齐，请添加一个

组标记，并通过

转换

属性对其进行定位。 像这样：

<mask id="mask" x="0" y="0" width="100%" height="100%">
  <rect id="alpha" x="0" y="0" width="100%" height="100%" />
    <g transform="translate(400,-300)"> 
       //your <path> inside
    </g>
</mask>

//你的内心

---

这是一个固定的

很好，谢谢！我以前对它们进行过分组，但我认为它会自动地连接到path元素。谢谢。我认为这是一种变通方法，因为我觉得这很不自然。我自己也不擅长svg。我认为应该有更好的方法来定位

元素。我建议你开始挖掘定义位置的路径的M和M属性。