CODEWITHSUNDEEP
svg
jekie
jekie

Reputation: 441

SVG & XLink: Rendering of Circle is inconsistent?

I have inline SVG showing a simple circle, which works as expected:

<svg width="200" height="200" viewBox="-25 -25 50 50" >
    <circle cx="0" cy="0" r="15" />
</svg>

This same code renders differently if I include the circle via XLink:

<svg width="200" height="200" viewBox="-25 -25 50 50">
    <use xlink:href="#circle"/>
</svg>

Here is an example: Fiddle

Why would these two examples render differently?

Thanks.

Upvotes: 1

Views: 56

Answers (1)

Holger Will
Holger Will

Reputation: 7526

Simply add overflow="visible" to your symbol

refined answer based on Robert Longson's Comment:

Even better is to move your circle inside the symbol to a position so that it's inside the viewport.

<svg style="display:none;">
  <symbol id="circle">
    <circle cx="25" cy="25" r="15" />
  </symbol>
</svg>

<svg width="200" height="200" viewBox="-25 -25 50 50">
  <use x="-25" y="-25" xlink:href="#circle" />
</svg>

<svg width="200" height="200" viewBox="-25 -25 50 50">
  <circle cx="0" cy="0" r="15" />
</svg>

Upvotes: 1

Related Questions