JSFiddle - React, Tailwind, and code Playground

by murgiaMarco

HTML

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" />
  <use href="#myCircle" x="10" fill="blue" />
  <use href="#myCircle" x="20" fill="white" stroke="red" />
  <!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
  -->
</svg>


<object id="svg1" data="https://fontawesomeicons.com/lib/svg/lamp-duotone.svg" type="image/svg+xml"></object>

CSS

#svg1 svg path:nth-child(2){
  fill:green;
}