JSFiddle - React, Tailwind, and code Playground

CSS to influence SVG Sizes (Total Fucking Hack)

by nilloc

HTML

<svg version="1.1" id="graphic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1280 800" enable-background="new 0 0 1280 800" xml:space="preserve">
    <rect id="red" x="300.5" y="215.5" stroke="#FFFFFF" stroke-miterlimit="10" width="1em" fill="red" height="270" />
    <rect id="blue" x="500.5" y="515.5" stroke="#eeeeee" stroke-miterlimit="10" width="270" fill="blue" height="270" />
</svg>

CSS

#graphic {
    width: 500px;
    height: 500px;
}
#red {
    font-size: 800px;
}
#red:hover {
    font-size: 1600px;
}