svg css esquina redondeada no funciona

Tengo un archivo SVG al que estoy aplicando CSS. La mayoría de las reglas parecen funcionar, pero cuando aplico reglas sobre el redondeo de esquinas (rx: 5; ry: 5) no tiene ningún efecto. reglas de estilo 'inline' funcionan, pero estoy teniendo suerte con las hojas de estilo incrustadas y externos:svg css esquina redondeada no funciona

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

Alguna idea de dónde voy mal?

Fuente

2011-12-31 pluke

rx y ry son atributos regulares en lugar de atributos de presentación. Solo los atributos de presentación pueden ser diseñados por CSS. Los diversos atributos regulares/de presentación se enumeran here

Vea también Presentation Attribute y Property de la especificación SVG 1.1.

La próxima especificación de SVG 2 propone que la mayoría de los atributos de presentación se conviertan en propiedades de CSS. Hasta ahora, solo Chome ha implementado esta parte del borrador de la especificación. Me imagino que otros UA implementarán esto a su debido tiempo.

Fuente

2011-12-31 12:49:52

que explica que, gracias. ¿Hay alguna forma de ajustar el redondeo de svg como se puede en css con 'border-radius: 5px;' – pluke

Esta es la respuesta obvia: –

Lo siento, debería haber sido más claro con la pregunta, ¿hay alguna manera de aplicar una hoja de estilo o una alternativa para lograr el mismo efecto, ya que CSS3 ahora permite a través de 'border-radius: 5px; '? No estoy creando dinámicamente los SVG y están siendo utilizados en diferentes sitios web con diferentes estilos generales. ¿Es la única manera de 'en línea' o escribir javascript para cambiarlo sobre la marcha? Gracias de nuevo por la ayuda – pluke

de secuencias de comandos no puede ser más simple, ¿por qué no usarlo:

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

Fuente

2012-01-01 17:06:37 Alex

svg css esquina redondeada no funciona

Respuesta

Cuestiones relacionadas