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

rt4zxlrg 于 2022-12-22 发布在 jQuery

关注(0)|答案(4)|浏览(246)

我有一些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>

jquery

来源：https://stackoverflow.com/questions/18697278/how-to-style-svg-g-element

4条答案

按热度按时间

2ledvvac1#

不能将样式添加到SVG <g>元素。它的唯一用途是将子元素分组。这也意味着，您给予它的样式属性将向下赋予其子元素，因此<g>上的fill="green"意味着其子元素<rect>上的自动fill="green"（只要它没有自己的fill规范）。
唯一的选择是向SVG添加一个新的<rect>，并相应地放置它以匹配<g>子元素的尺寸。

赞(0）回复(0）举报 2022-12-22

2wnc66cl2#

实际上无法绘制容器元素
但是您可以使用一个内部带有“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>

赞(0）回复(0）举报 2022-12-22

vjrehmav3#

我知道在这个问题被问到并得到回答之后很久--我确信公认的解决方案是正确的，但是当我可以用直接的CSS实现相同或相似的效果时，我的纯粹主义者宁愿不向SVG添加额外的元素。
虽然在大多数情况下确实不能对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>

赞(0）回复(0）举报 2022-12-22

nbewdwxp4#

您赋予"g"元素的样式将应用于子元素，而不是"g"元素本身。
添加一个矩形元素，并将其放置在要设置样式的组周围。
参见：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g
编辑：更新了措辞，并在评论中添加了修饰。

赞(0）回复(0）举报 2022-12-22