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

回答

相關問題