Override SVG transform attributes with CSS - css

Question

I have a SVG element that looks like this:
<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>
Is it possible to override transform attribute with CSS? I've tried this and it doesn't work:
image {
transform: none;
}

Answer 1

Looks like transform: none doesn't quite work in all browsers (see bugreport) (fixed jan 2017), but it's possible to work around that by using an identity matrix, e.g transform: scale(1). The stylerules will override the attributes, as demonstrated by the following snippet:
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>
Same as fiddle.

Answer 2

CSS cannot affect an attribute only a CSS property. You could try using a CSS transform instead of an SVG attribute transform in the first place, although not all UAs support CSS transforms on SVG elements yet.
Here's an example of a CSS transform with a rect element. Put the mouse over it to see it change.
rect {
transform: translate(50px, 0) rotate(30deg);
}
rect:hover {
transform: none;
}
<svg>
<rect x="30" y="30" width="50" height="50" fill="red"/>
</svg>