svg css закругленный угол не работает

Question

У меня есть файл SVG, к которому я применяю CSS. Кажется, что большинство правил работают, но когда я применяю правила о скруглении углов (rx: 5; ry: 5), это не имеет никакого эффекта. Правила встроенных стилей работают, но мне не везет со встроенными и внешними таблицами стилей:

<svg ...>
 <defs>
  <style type="text/css" >
    <![CDATA[
     rect{ rx:5; ry:5;  }
    ]]>
  </style>
 </defs>

 <rect
    height="170" width="70" id="rect7"
    x="0" y="0" />
</svg>

Есть идеи, где я иду не так?

Answer 1

rx и ry являются обычными атрибутами, а не атрибутами представления. Только атрибуты представления могут быть стилизованы CSS. Различные атрибуты обычных / презентаций перечислены здесь

См. Также Атрибут представления и Свойство из спецификации SVG 1.1.

В следующей спецификации SVG 2 предлагается, чтобы большинство атрибутов представления стали свойствами CSS. Пока только Chome реализовал эту часть проекта спецификации. Я полагаю, что другие UA будут реализовывать это в свое время.

Answer 2

Сценарии не могут быть проще, почему бы не использовать их:

 yourRect.setAttributeNS(null, "rx", "5");
 yourRect.setAttributeNS(null, "ry", "5");