Как создать элемент SVG <g>?

У меня есть элементы 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>

Ответ 1

На самом деле вы не можете рисовать Элементы контейнера

Но вы можете использовать "foreignObject" с "SVG" внутри него, чтобы имитировать то, что вам нужно.

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>

Ответ 2

Вы не можете добавить стиль к элементу SVG <g>. Его единственная цель - группировать детей. Это означает, что атрибуты стиля, которые вы ему даете, передаются его дочерним элементам, поэтому fill="green" на <g> означает автоматическое fill="green" для своего дочернего элемента <rect> (если у него нет собственного fill).

Ваш единственный вариант - добавить новый <rect> в SVG и поместить его соответственно в соответствии с размерами <g> для детей.

Ответ 3

Стиль, который вы даете элементу "g", будет применять дочерние элементы, а не сам элемент "g".

Добавьте элемент прямоугольника и расположите его вокруг группы, которую вы хотите стилизовать.

Смотрите: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

EDIT: обновленная формулировка и добавленная скрипка в комментариях.