web-dev-qa-db-ja.com

svg css丸い角が機能しない

CSSを適用するSVGファイルがあります。ほとんどのルールは機能しているように見えますが、角の丸みに関するルール（rx：5; ry：5）を適用すると、効果がありません。 「インライン」スタイルのルールは機能しますが、埋め込みスタイルシートと外部スタイルシートではうまくいきません。

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

私が間違っているところはありますか？

csshtmlsvgrounded-corners
26
pluke

rxとryは、プレゼンテーション属性ではなく通常の属性です。 CSSでスタイル設定できるのはプレゼンテーション属性のみです。さまざまな通常/プレゼンテーション属性がリストされています ここ

SVG 1.1仕様の Presentation Attribute および Property も参照してください。

次のSVG 2仕様では、ほとんどのプレゼンテーション属性がCSSプロパティになることを提案しています。これまでのところ、Chomeだけがドラフト仕様のこの部分を実装しています。他のUAがやがてこれを実装すると思います。

28
Robert Longson

スクリプトを単純にすることはできません。なぜそれを使用しないのですか。

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