forked from rosa/hakurei
34 lines
1.8 KiB
XML
34 lines
1.8 KiB
XML
<?xml version="1.0"?>
|
||
<!--
|
||
! This view box is a bit weird: the strokes assume they're working in a view
|
||
! box that spans from the (0,0) to (100,100), and indeed that is convenient
|
||
! conceptualizing the strokes, but the stroke itself has a considerable width
|
||
! that gets clipped by restrictive view box dimensions. Hence, the view is
|
||
! shifted from (0,0)–(100,100) to (-20,-20)–(120,120), to make room for the
|
||
! clipped stroke, while leaving behind an illusion of working in a view box
|
||
! spanning from (0,0) to (100,100).
|
||
!
|
||
! However, the resulting SVG is too close to the summary text, and CSS
|
||
! properties to add padding do not seem to work with `content:` (likely because
|
||
! they're anonymous replaced elements); thus, the width of the view is
|
||
! increased considerably to provide padding in the SVG itself, while leaving
|
||
! the strokes oblivious.
|
||
!
|
||
! It gets worse: the summary text isn't vertically aligned with the icon! As
|
||
! a flexbox cannot be used in a summary to align the marker with the text, the
|
||
! simplest and most effective solution is to reduce the height of the view box
|
||
! from 140 to 130, thereby removing some of the bottom padding present.
|
||
!
|
||
! All six SVGs use the same view box (and indeed, they refer to this comment)
|
||
! so that they all appear to be the same size and position relative to each
|
||
! other on the DOM—indeed, the view box dimensions, alongside the width,
|
||
! directly control their placement on the DOM.
|
||
!
|
||
! TL;DR: CSS is janky, overflow is weird, and SVG is awesome!
|
||
-->
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
|
||
<polygon points="0,0 100,0 50,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
|
||
<line x1="30" y1="10" x2="70" y2="50" stroke="white" stroke-width="16"/>
|
||
<line x1="30" y1="50" x2="70" y2="10" stroke="white" stroke-width="16"/>
|
||
</svg>
|