Skip to content

Conversation

@bluemoehre
Copy link

@bluemoehre bluemoehre commented Aug 30, 2016

The problem I had, was having some positioning attributes at the use element. So after running this script the SVG parts are at the wrong positions:

Original:

<svg viewbox="0 0 30 10">
  <use xlink:href="sprite.svg#icon-1"/>
  <use xlink:href="sprite.svg#icon-2" x="10"/>
  <use xlink:href="sprite.svg#icon-3" x="20"/>
</svg>

Result:

<svg viewbox="0 0 30 10">
  <path d="..."/>
  <path d="..."/>
  <path d="..."/>
</svg>

I added some logic which will copy additional attributes to a group element wrapper. Since group elements do not support X + Y, I left a TODO. But with transform and others it's working fine for me:

Original:

<svg viewbox="0 0 30 10">
  <use xlink:href="sprite.svg#icon-1"/>
  <use xlink:href="sprite.svg#icon-2" transform="translate(10)"/>
  <use xlink:href="sprite.svg#icon-3" transform="translate(20)"/>
</svg>

Result:

<svg viewbox="0 0 30 10">
  <path d="..."/>
  <g transform="translate(10)"><path d="..."/></g>
  <g transform="translate(20)"><path d="..."/></g>
</svg>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant