web-dev-qa-db-fra.com

SVG CSS Coin arrondi ne fonctionne pas

J'ai un fichier SVG que j'applique CSS à. La plupart des règles semblent fonctionner, mais lorsque j'applique des règles sur l'arrondissement des coins (RX: 5; RY: 5) Il n'a aucun effet. Les règles de style "en ligne" fonctionnent, mais je n'ai aucune chance avec des feuilles de style intégrées et externes:

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

Une idée où je vais mal?

csshtmlsvgrounded-corners
26
pluke

rX et RY sont des attributs réguliers plutôt que des attributs de présentation. Seuls les attributs de présentation peuvent être stylés par CSS. Les différents attributs habituels/présentations sont répertoriés ici

Voir aussi Attribut de présentation et Propriété de la spécification SVG 1.1.

La spécification SVG 2 à venir propose que la plupart des attributs de présentation deviennent propriétés CSS. Jusqu'à présent, seul Chome a mis en œuvre cette partie du projet de spécification. J'imagine que d'autres UA mettront en œuvre cela en temps voulu.

28
Robert Longson

Les scripts ne peuvent pas être plus simples, pourquoi ne pas l'utiliser:

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