search

jonathantneal / svg4everybody

Use external SVG spritemaps today
https://jonneal.dev/svg4everybody/
Other
3.29k stars 353 forks source link

if use element has additional attributes, they will be copied to a new group element #122

Open bluemoehre opened 8 years ago

bluemoehre commented 8 years ago

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>