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

У меня есть файл SVG, к которому я применяю CSS. Большинство правил, похоже, работают, но когда я применяю правила округления углов (rx: 5; ry: 5), это не имеет никакого эффекта. Правила стиля «ИНЛАЙН» работать, но я не имею никакой удачи со встроенными и внешними таблицами стилей:svg css закругленный угол не работает

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

Любая идея, где я неправильно?

источник

2011-12-31 pluke

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

См. Также Presentation Attribute и Property из спецификации SVG 1.1.

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

источник

2011-12-31 12:49:52

, что объясняет его, спасибо. Есть ли способ отрегулировать округление svg, как вы можете в css с 'border-radius: 5px;' – pluke

Это очевидный ответ: –

Извините, я должен был уточнить вопрос, есть ли способ, которым можно использовать таблицу стилей или альтернатив для достижения такого же эффекта, как CSS3 теперь разрешает через «радиус границы»: 5px; '? Я не динамически создаю SVG, и они используются на разных сайтах с разными общими стилями. Это единственный способ «встроить» его или написать javascript, чтобы изменить его на лету? Еще раз спасибо за помощь – pluke

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

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

источник

2012-01-01 17:06:37 Alex

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

ответ

Смежные вопросы