M
M
Muvka2020-01-04 21:02:10
SVG
Muvka, 2020-01-04 21:02:10

Is the svg sprite done correctly?

For the rating it was required to create an svg sprite. Googling did this

<svg width="196" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196 16">
  <symbol id="star">
    <path d="M8 1L10.0161 5.22507L14.6574 5.83688L11.2621 9.05993L12.1145 13.6631L8 11.43L3.8855 13.6631L4.73788 9.05993L1.3426 5.83688L5.9839 5.22507L8 1Z"/>
  </symbol>
  <use href="#star" fill="#FF9C28"></use>
  <use x="20" href="#star" fill="#FF9C28"></use>
  <use x="40" href="#star" fill="#FF9C28"></use>
  <use x="60" href="#star" fill="#FF9C28"></use>
  <use x="80" href="#star" fill="#FF9C28"></use>
  <use x="100" href="#star" fill="#D0D8E2"></use>
  <use x="120" href="#star" fill="#D0D8E2"></use>
  <use x="140" href="#star" fill="#D0D8E2"></use>
  <use x="160" href="#star" fill="#D0D8E2"></use>
  <use x="180" href="#star" fill="#D0D8E2"></use>
</svg>

Everything seems fine in browsers, but it's embarrassing that neither inkscape nor the image viewer shows stars. Is this normal or did I do something wrong?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Peter, 2020-01-04
@Muvka

Use has no href , only xlink:href
<use xlink:href="#star" />

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question