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

Question

我有一些 SVG 元素组合在一个 <g> 元素中。我只想设置 <g> 元素的样式以显示元素分组。就像我想给它一些背景颜色和边框一样。如何实现？

我尝试将fill 和stroke 属性赋予<g> 元素，但它不起作用。怎么可能？提前致谢！

Sample Here

<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>

Answer 1

您不能为 SVG <g> 元素添加样式。它的唯一目的是对孩子进行分组。这也意味着，您赋予它的样式属性会传给它的子代，因此<g> 上的fill="green" 意味着其子代<rect> 上的自动fill="green"（只要它没有自己的@ 987654326@规范）。

您唯一的选择是向 SVG 添加一个新的 <rect> 并相应地放置它以匹配 <g> 孩子的尺寸。

Answer 2

你实际上不会画Container Elements

但是您可以使用内部带有“SVG”的“foreignObject”来模拟您需要的内容。

http://jsfiddle.net/VBmbP/4/

<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>

Answer 3

我知道在这个问题被问和回答很久之后——我确信公认的解决方案是正确的，但是当我可以实现相同或相似时，我的纯粹主义者宁愿不向 SVG 添加额外元素直接的 CSS。

虽然您确实无法以大多数方式设置 g 容器元素的样式 - 您绝对可以为其添加轮廓和样式 - 甚至在悬停 g 时更改它 - 如 sn- p.

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

而且这种方法绝对可以让您在 SVG 中显示相关对象的分组。

只是一个想法。

g {
    outline: solid 3px blue;
    outline-offset: 5px;
  }

g:hover {
 outline-color: red
}

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
  <g>
    <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"/>     
  </g>
</svg>

Answer 4

您赋予“g”元素的样式将应用子元素，而不是“g”元素本身。

添加一个矩形元素并围绕您要设置样式的组定位。

见：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

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