Question

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

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

<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>元素添加样式。它的唯一目的是将儿童分组。这意味着，您提供给它的样式属性也会被赋予其子项，因此fill="green"上的<g>表示其子fill="green"上的<rect>自动fill（只要它没有自己的<rect>规范）。

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

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相同或相似的功能时，我的纯粹主义者不愿在SVG中添加其他元素直CSS。

虽然确实不能在大多数情况下对g容器元素进行样式设置-您绝对可以为其添加轮廓并为其设置样式-甚至在g悬停时对其进行更改-如图所示在摘要中。

它在一方面没有另一种方法那么好-您可以将轮廓框放在分组的元素周围-但后面没有背景。它不是完美的，不能解决每个人的问题-但我宁愿用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

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

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

4 个答案: