CODEWITHSUNDEEP
htmlcsssvg
N6MCA51593
N6MCA51593

Reputation: 68

Transform attribute applied to SVG <symbol> works in Firefox, but not in Chrome

I have an SVG icon I want to reuse, and would like to transform it first before doing so. Here is a simplified version of the issue I'm facing:

svg {
  width: 100px;
  height: 100px;
  background: blue;
}

.circle {
  fill: green;
  transform: scale(3)
}
<svg viewBox="0 0 200 200">
  
  <symbol id="circle" transform="scale(2)" class="circle">
    <circle cx="50" cy="50" r="50" />
  </symbol>
    
  <use href="#circle"/>

</svg>

The green circle is properly sized in Firefox, whether I use inline styling or a class, but in Chrome, the fill attribute is applied, but not transform, class or inline, it remains small. A comparison screenshot:

enter image description here

Of course, I could work around it by applying transformations to each <use> element, but I'd like to understand why it doesn't work, because in the MDN docs, the <symbol> page lists transform as a legal attribute. Perhaps the issue is that transform is not inherited, but it still works in Firefox, so maybe the problem lies elsewhere.

Upvotes: 0

Views: 225

Answers (1)

N6MCA51593
N6MCA51593

Reputation: 68

As Robert Longson pointed out in the comments, <symbol> elements supporting the transform property is a new SVG 2 feature that hasn't made its way to Chrome yet.

Upvotes: 1

Related Questions