Javascript 如何设置SVG的样式<；g>；元素？

我将一些SVG元素组合在一个

元素中。我只想设置

元素的样式，以显示元素的分组。就像我想给它一些背景色和边框。如何实现这一目标

我尝试了

fill

和

stroke

属性添加到

元素，但它不起作用。怎么可能呢？提前谢谢

---

您为“g”元素指定的样式将应用子元素，而不是“g”元素本身

添加一个矩形元素并放置在要设置样式的组周围

见：

---

编辑：更新了措辞并在注释中添加了小提琴。

您不能向SVG

元素添加样式。它的唯一目的是将儿童分组。这也意味着，您赋予它的样式属性将被赋予它的子级，因此

上的

fill=“green”

表示其子级

上的自动

fill=“green”

（只要它没有自己的

fill

规范）

您唯一的选择是向SVG中添加一个新的

，并相应地放置它以匹配

儿童的尺寸。

您实际上无法绘制

但是，您可以使用一个包含“SVG”的“foreignObject”来模拟您需要的内容

#G{
背景：#cff；边框：1px黑色虚线；
}
#G:悬停{
背景：#acc；边框：1px纯黑色；
}

我知道，这个问题被问到和回答很久之后，我知道人们接受的解决方案是正确的，但我内心的纯粹主义者不愿意在SVG中添加额外的元素，因为我可以通过直接CSS实现相同或相似的效果

诚然，您不能以大多数方式设置

g

容器元素的样式-您可以向其添加一个轮廓并设置样式-甚至在

g

悬停时更改它-如代码段所示

这在一方面不如另一方面好——你可以把轮廓框放在分组的元素周围——但后面没有背景。所以它并不完美，也不会为每个人解决这个问题——但我宁愿用css完成大纲，也不愿仅仅为了提供样式挂钩而向代码中添加额外的元素

这种方法明确地允许您在SVG中显示相关对象的分组

只是一个想法

g{
外形：实心3px蓝色；
轮廓偏移量：5px；
}
g:悬停{
轮廓颜色：红色
}

有几个js库可用于此功能。可以尝试raphaeljs对svg元素进行分组吗？

不允许有形状或

作为chidlren（甚至不允许在中）。因此，它将不会简单地跨越以满足其子对象的维度。@Boldewyn我的意思是图形化的，而不是字面上的，但我将重新措辞以明确这一点。如图所示：

元素的子元素会继承其

类

属性吗？（测试表明确实如此，这意味着您可以将css敏感类应用于

元素，并让所有子元素继承该类的样式属性）是的，您可以，但foreignObject并不适用于此：从这个意义上讲，它并不比rect对象更合适。但您不能将元素嵌套在rect中，你能吗？目前foreignObject浏览器的支持还非常有限。在我的用例（只需要一个组内容的视觉线索）完美运行了这么长时间后，支持增加了很多。谢谢-很高兴我能提供帮助。快乐编码

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <g fill="blue" stroke="2">
            <rect id="svg_6" height="112" width="84" y="105" x="136" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#00ff00"/>
        <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="271" cy="156" id="svg_7" rx="64" ry="56"/>
    </g>
</svg>

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
      <foreignObject id="G" width="300" height="200">
        <svg>
          <rect fill="blue" stroke-width="2" height="112" width="84" y="55" x="55" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#000000"/>
          <ellipse fill="#FF0000" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="155" cy="65" id="svg_7" rx="64" ry="56"/>     
        </svg>
          <style>
              #G {
                background: #cff; border: 1px dashed black;
              }
              #G:hover {
                background: #acc; border: 1px solid black;
              }
          </style>
      </foreignObject>
    </svg>