覆盖SVG变换属性与CSS

我有一个看起来像这样的SVG元素：覆盖SVG变换属性与CSS

<image 
    xmlns="http://www.w3.org/2000/svg" 
    overflow="visible" 
    width="54" 
    height="54" 
    id="Content-Author-Off_xA0_Image" 
    xlink:href="data:image/png;base64,..." 
    transform="matrix(1 0 0 1 0 108)"> 
</image>

是否有可能重写transform与CSS属性？我已经试过这一点，这是行不通的：

image { 
    transform: none; 
}

来源

2014-09-19 Pavlo

貌似transform: none确实在所有浏览器（见bugreport）不太工作，但它可能是通过使用单位矩阵，e.g transform: scale(1)来解决。该stylerules将覆盖属性，通过下面的代码片段作为证明：

circle { 
 
    transform-origin: 50%; 
 
    transform: scale(1); 
 
    transition: transform 0.5s; 
 
} 
 

 
circle:hover { 
 
    transform: scale(2); 
 
}

<svg> 
 
    <circle cx="50" cy="50" r="25" transform="translate(500 500)"/> 
 
</svg>

同fiddle。

来源

2014-09-19 12:38:24

CSS不会影响一个属性只有一个CSS属性。首先，您可以尝试使用CSS转换而不是SVG属性转换，尽管并非所有UA都支持SVG元素上的CSS转换。

下面是一个带有rect元素的CSS转换示例。将鼠标放在它上面，看看它是否改变。

rect { 
 
    transform: translate(50px, 0) rotate(30deg); 
 
} 
 

 
rect:hover { 
 
    transform: none; 
 
}

<svg> 
 
    <rect x="30" y="30" width="50" height="50" fill="red"/> 
 
</svg>

来源

2014-09-19 06:33:07

覆盖SVG变换属性与CSS

回答

相关问题