SVG Triangle of Compromise

Re:SVG Triangle of Compromise by panstromek on Monday July 29, 2024 @01:07PM (#41101937)

hmm, I didn't know you can use fragment identifiers in src attribute, that changes the game quite a bit. I remember looking for stuff like that, though. Not sure why I didn't anything, because it seems like it's been supported for quite a while. I only found the reuse inside svg in the same parent html document.

[ Parent | on HN ]

Re:SVG Triangle of Compromise by jarek-foksa on Monday July 29, 2024 @04:54PM (#41103684)

Fragment identifiers in "src" attribute seem to be supported by all modern browsers, but now I realized my example was wrong - you can reference <view> elements, but not <symbol> elements directly.

To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:

  <?xml version="1.0" encoding="utf-8"?>
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="recolorable" viewBox="0 0 100 100">
        <rect width="100" height="100" style="fill: inherit;"/>
      </symbol>
      <view id="blue"  viewBox="  0 0 100 100"></view>
      <view id="green" viewBox="100 0 100 100"></view>
    </defs>

    <use x="0"   y="0" width="100" height="100" style="fill: blue;"  xlink:href="#recolorable"/>
    <use x="100" y="0" width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
  </svg>

[ Parent | on HN ]