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");