svg css圆角不工作 [英] svg css rounded corner not working

问题描述

我有一个应用CSS的SVG文件。大多数规则似乎工作，但是当我应用关于角的舍入（rx：5; ry：5）的规则时，它没有效果。 内联样式规则工作，但我没有运气与嵌入和外部样式表：

I have an SVG file that I am applying CSS to. Most rules seem to work, but when I apply rules about the rounding of corners (rx:5; ry:5) it has no effect. 'Inline' style rules work, but I'm having no luck with embedded and external style sheets:

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

任何想法我错了什么？

推荐答案

rx和ry是常规属性，而不是表示属性。只有表示属性可以通过CSS样式。 此处列出了各种常规/演示文稿属性

rx and ry are regular attributes rather than presentation attributes. Only presentation attributes can be styled by CSS. The various regular/presentation attributes are listed here

另请参见演示文稿属性和属性来自SVG 1.1规范。

See also Presentation Attribute and Property from the SVG 1.1 specification.

即将到来的SVG 2规范建议大多数表示属性成为CSS属性。到目前为止，Chome已经实现了规范草案的这一部分。我想其他UA会在适当的时候实施这个。

The upcoming SVG 2 specification proposes that most presentation attributes become CSS properties. So far only Chome has implemented this part of the draft specification. I imagine other UAs will implement this in due course.

这篇关于svg css圆角不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！