SVGs in MVC-Framework organisieren

[Rolf B]

Hallo borisbaer,

was jetzt untergegangen ist, war die Frage nach dem animierbaren use. Gunnar fragte nur "nicht?" - zeigte aber kein Gegenbeispiel. Wenn Du eins hast, Gunnar, dann gerne her damit.

Ich habe es auch mal probiert - das müsste dann ja so aussehen:

<label class="fancy-checkbox">
  <input name="foo" type="checkbox">
  <svg viewBox="0 0 30 30"><use href="#checkmark"></use></svg>
  <span>Denk an mich</span>
</label>

und in irgendeiner verschwiegenen Ecke steckt ein SVG mit einer defs-Sektion und einem <symbol id="checkmark">

Ich habe eine JS-freie Lösung angestrebt und deswegen - bevor ich use probiert habe - dieses HTML verwendet:

<label class="fancy-checkbox">
  <input name="foo" type="checkbox">
  <svg viewBox="0 0 30 30">
    <rect x="1" y="1" width="28" height="28" rx="5"
          stroke="black" stroke-width="3" fill="none" />
    <path d="M10,15 l5,5 12,-18"
          stroke="black" stroke-width="3" fill="none" />
  </svg>
  <span>Denk an mich</span>
</label>

und die Transitionen mit

.fancy-checkbox input + svg rect {
   stroke-dasharray: 90,0;
   stroke-dashoffset: 0;
   transition: all 0.5s ease-in-out;
}
.fancy-checkbox input:checked + svg rect {
    stroke-dasharray: 90,18;
    stroke-dashoffset: 77;
}

ausgelöst.

Wenn da aber der use steht, befindet sich der path im Shadow-DOM (sofern es eins ist) des use und ich komme mit dem Selektor nicht mehr 'ran. Ich kann und will aber auch nicht das SVG manipulieren, wo das Symbol definiert ist, weil ich dann alle Checkboxen auf einmal animieren würde, die auf der Seite sind.

Vielleicht gibt's SMIL Tricks, aber damit kenn ich mich nicht aus.

Rolf