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

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

<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>

Любая идея, где я ошибаюсь?

Ответ 1

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

См. также Атрибут презентации и Property от спецификация SVG 1.1.

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

Ответ 2

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

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