CODEWITHSUNDEEP
csssvg
Pavlo
Pavlo

Reputation: 44965

Override SVG transform attributes with CSS

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

Upvotes: 1

Views: 2794

Answers (2)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 61026

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.

Upvotes: 2

Robert Longson
Robert Longson

Reputation: 124249

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>

Upvotes: 2

Related Questions