Firefox: применение свойств CSS/CSS для SVG-элементов

Question

Firefox, похоже, полностью игнорирует border и outline Свойства CSS, определенные для элементов SVG. Элементы группы SVG, <g>, в моем случае, используются для группировки составных элементов в один логический элемент, чтобы упростить взаимодействие с пользователем в моем приложении. Следующий код работает очень хорошо в Chrome:

<svg> 
    <g> 
     <rect x="10" y="10" width="50" height="50" fill="yellow"></rect> 
     <rect x="20" y="20" width="30" height="30" fill="yellowgreen"></rect> 
    </g> 
</svg> 

g:hover { 
    outline: dashed 4px red; 
} 

http://jsfiddle.net/QQRPj/

В Chrome, когда вы перемещаете указатель мыши на группу из двух прямоугольников, группа получает красный пунктирный прямоугольник вокруг него. Однако я не могу заставить его работать в Firefox, несмотря на то, что он поддерживает более простые свойства CSS, такие как cursor, display и свойства, связанные с SVG, такие как described at MDN.

Есть ли возможность сделать outline и border Свойства CSS работают в Firefox, поэтому изменение CSS может быть единственным эффективным патчем вместо исправления кода, связанного с SVG?

Answer 1

Спецификация SVG имеет список all CSS properties that are valid for SVG. Границы и контуры отсутствуют в этом списке и поэтому не применяются к SVG. Вы должны поднять blink bug

Если вы хотите границу или контур в SVG вы должны положить <rect> вокруг объекта и рассчитать, что <rect> положение с помощью getBBox при необходимости. В приведенном выше случае вы можете поместить наведение на внешний элемент <svg>, поскольку это замененный элемент, и из-за этого он получает свойства границ и контуров.