README-files/demo-text.svg

<svg xmlns="http://www.w3.org/2000/svg" width="453.439" height="293.001"><style>@media (prefers-color-scheme: light) {svg {filter: contrast(90%);}} @media (prefers-color-scheme: dark) {svg {filter: contrast(90%) url(#invert-luminance);}}</style><defs><filter id="invert-luminance" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values=" 0.368 -1.023 -0.346 0 1 -0.632 -0.023 -0.346 0 1 -0.632 -1.023  0.654 0 1  0      0      0     1 0"/></filter><defs><path id="rect1228" d="M463.201 358.331h126.315v39.088H463.201z"/></defs></defs><g><animate attributeName="opacity" dur="2s" from="0" keyTimes="0;0.5;0.5;1" repeatCount="indefinite" to="1" values="0;0;1;1"/><path d="M281.799 258.969H411.67v173.629H281.799z" style="opacity:.5;fill:#ccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.74392" transform="translate(-115.796 -188.303)"/><text xml:space="preserve" x="354.459" y="205.588" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:24px;line-height:0%;font-family:&quot;Times New Roman&quot;;-inkscape-font-specification:&quot;Times New Roman,&quot;;fill:red;stroke:none;stroke-width:1.5"><tspan style="line-height: 1.25;">red</tspan></text><path d="M116.595 189.103h451.841v291.402H116.595z" style="fill:none;stroke:red;stroke-width:1.59867" transform="translate(-115.796 -188.303)"/><text xml:space="preserve" x="368.607" y="86.898" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:18px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:center;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:middle;display:inline;overflow:visible;visibility:visible;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;marker:none;enable-background:accumulate"><tspan style="line-height: 0;">a*b*c</tspan></text><path d="M484.403 246.177v47.244" style="fill:none;stroke:#000;stroke-width:1.5" transform="translate(-115.796 -188.303)"/><text xml:space="preserve" x="328.998" y="241.57" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:32px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#00f;fill-opacity:1;stroke:none;stroke-width:1.8171px;marker:none;enable-background:accumulate"><tspan style="line-height: 0; stroke-width: 1.8171;">blue</tspan></text><text xml:space="preserve" x="344.847" y="221.498" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:24px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#0f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;marker:none;enable-background:accumulate"><tspan style="line-height: 0;">green</tspan></text><path d="M146.4 281.011h35.309v93.176H146.4z" style="fill:#b3b3b3;stroke:none" transform="matrix(1.5 0 0 1.5 -181.7 -409.066)"/><text xml:space="preserve" x="292.613" y="-146.4" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:16px;line-height:0%;font-family:&quot;Times New Roman&quot;;-inkscape-font-specification:&quot;Times New Roman,&quot;;fill:#000;stroke:none" transform="matrix(0 1.5 -1.5 0 -181.7 -409.066)"><tspan style="line-height: 1.25;">90 degrees</tspan></text><text xml:space="preserve" x="-362.663" y="181.709" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:16px;line-height:0%;font-family:&quot;Times New Roman&quot;;-inkscape-font-specification:&quot;Times New Roman,&quot;;fill:#000;stroke:none" transform="matrix(0 -1.5 1.5 0 -181.7 -409.066)"><tspan style="line-height: 1.25;">-90 degrees</tspan></text><text xml:space="preserve" x="368.607" y="71.66" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:18px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;marker:none;enable-background:accumulate"><tspan style="line-height: 0;">a*b*c</tspan></text><text xml:space="preserve" x="368.607" y="100.685" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:18px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:end;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:end;display:inline;overflow:visible;visibility:visible;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;marker:none;enable-background:accumulate"><tspan style="line-height: 0;">a*b*c</tspan></text><path d="M233.055 400.96h87.302v5.153h-87.302z" style="fill:#666;stroke:none" transform="rotate(-45 -198.84 826.268) scale(1.5)"/><text xml:space="preserve" x="233.055" y="400.96" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:9.33333px;line-height:0%;font-family:&quot;Adobe Garamond Pro&quot;;-inkscape-font-specification:&quot;Adobe Garamond Pro&quot;;text-align:start;writing-mode:lr-tb;text-anchor:start;display:inline;overflow:visible;visibility:visible;fill:#000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;enable-background:accumulate" transform="rotate(-45 -198.84 826.268) scale(1.5)"><tspan style="line-height: 1;">aligned **on baseline**</tspan></text><text xml:space="preserve" x="328.038" y="356.247" style="font-size:12px;line-height:normal;font-family:sans-serif;text-decoration-color:#000;white-space:pre;inline-size:87.2802;display:inline;fill:#000;stroke-width:.328819;stop-color:#000" transform="matrix(1.5 0 0 1.5 -326.054 -448.705)">Paragraph with <tspan x="328.038" y="371.247">**wrapped** </tspan><tspan x="328.038" y="386.247">text.
</tspan><tspan x="328.038" y="401.247">
</tspan><tspan x="328.038" y="416.247">*Another* </tspan><tspan x="328.038" y="431.247">paragraph with </tspan><tspan x="328.038" y="446.247">wrapped </tspan><tspan x="328.038" y="461.247">~~test~~ text.</tspan></text><path d="M488.742 312.598h67.5v60h-67.5z" style="fill:#84ff92;fill-opacity:1;stroke-width:.493228;stop-color:#000" transform="translate(-115.796 -188.303)"/><text xml:space="preserve" x="305.307" y="169.516" style="color:#000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:24px;line-height:0%;font-family:Arial;-inkscape-font-specification:Arial;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-anchor:start;display:inline;overflow:visible;visibility:visible;opacity:.5;fill:#00f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5px;marker:none;enable-background:accumulate"><tspan style="line-height: 0;">transparent</tspan></text></g><g><animate attributeName="opacity" dur="2s" from="0" keyTimes="0;0.5;0.5;1" repeatCount="indefinite" to="1" values="0;0;1;1" begin="1s"/><path d="M281.799 258.969H411.67v173.629H281.799z" style="opacity:.5;fill:#ccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.74392" transform="translate(-115.796 -188.303)"/><foreignObject x="354.459" y="205.588" width="1000" height="1" overflow="visible" style="font-size: 24px; font-family: &quot;Times New Roman&quot;; color: red;"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -480px;"><span style="height: 480px; display: inline-block;"></span>red</p></div></foreignObject><path d="M116.595 189.103h451.841v291.402H116.595z" style="fill:none;stroke:red;stroke-width:1.59867" transform="translate(-115.796 -188.303)"/><foreignObject x="368.607" y="86.898" width="1000" height="1" overflow="visible" style="font-size: 18px; font-family: Arial; color: rgb(0, 0, 0); text-align: center;"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -360px; transform: translateX(-50%);"><span style="height: 360px; display: inline-block;"></span>a<em>b</em>c</p></div></foreignObject><path d="M484.403 246.177v47.244" style="fill:none;stroke:#000;stroke-width:1.5" transform="translate(-115.796 -188.303)"/><foreignObject x="328.998" y="241.57" width="1000" height="1" overflow="visible" style="font-size: 32px; font-family: Arial; color: rgb(0, 0, 255);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -640px;"><span style="height: 640px; display: inline-block;"></span>blue</p></div></foreignObject><foreignObject x="344.847" y="221.498" width="1000" height="1" overflow="visible" style="font-size: 24px; font-family: Arial; color: rgb(0, 255, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -480px;"><span style="height: 480px; display: inline-block;"></span>green</p></div></foreignObject><path d="M146.4 281.011h35.309v93.176H146.4z" style="fill:#b3b3b3;stroke:none" transform="matrix(1.5 0 0 1.5 -181.7 -409.066)"/><foreignObject x="292.613" y="-146.4" width="1000" height="1" overflow="visible" transform="matrix(0 1.5 -1.5 0 -181.7 -409.066)" style="font-size: 16px; font-family: &quot;Times New Roman&quot;; color: rgb(0, 0, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -320px;"><span style="height: 320px; display: inline-block;"></span>90 degrees</p></div></foreignObject><foreignObject x="-362.663" y="181.709" width="1000" height="1" overflow="visible" transform="matrix(0 -1.5 1.5 0 -181.7 -409.066)" style="font-size: 16px; font-family: &quot;Times New Roman&quot;; color: rgb(0, 0, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -320px;"><span style="height: 320px; display: inline-block;"></span>-90 degrees</p></div></foreignObject><foreignObject x="368.607" y="71.66" width="1000" height="1" overflow="visible" style="font-size: 18px; font-family: Arial; color: rgb(0, 0, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -360px;"><span style="height: 360px; display: inline-block;"></span>a<em>b</em>c</p></div></foreignObject><foreignObject x="368.607" y="100.685" width="1000" height="1" overflow="visible" style="font-size: 18px; font-family: Arial; color: rgb(0, 0, 0); text-align: end;"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -360px; transform: translateX(-100%);"><span style="height: 360px; display: inline-block;"></span>a<em>b</em>c</p></div></foreignObject><path d="M233.055 400.96h87.302v5.153h-87.302z" style="fill:#666;stroke:none" transform="rotate(-45 -198.84 826.268) scale(1.5)"/><foreignObject x="233.055" y="400.96" width="1000" height="1" overflow="visible" transform="rotate(-45 -198.84 826.268) scale(1.5)" style="font-size: 9.33333px; font-family: &quot;Adobe Garamond Pro&quot;; color: rgb(0, 0, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -187px;"><span style="height: 187px; display: inline-block;"></span>aligned <strong>on baseline</strong></p></div></foreignObject><foreignObject x="328.038" y="356.247" width="87.2802" height="1" overflow="visible" transform="matrix(1.5 0 0 1.5 -326.054 -448.705)" style="font-size: 12px; font-family: sans-serif; color: rgb(0, 0, 0);"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -240px;"><span style="height: 240px; display: inline-block;"></span>Paragraph with <strong>wrapped</strong> text.</p><p><em>Another</em> paragraph with wrapped <del>test</del> text.</p>
</div></foreignObject><path d="M488.742 312.598h67.5v60h-67.5z" style="fill:#84ff92;fill-opacity:1;stroke-width:.493228;stop-color:#000" transform="translate(-115.796 -188.303)"/><foreignObject x="305.307" y="169.516" width="1000" height="1" overflow="visible" style="font-size: 24px; font-family: Arial; color: rgb(0, 0, 255); opacity: 0.5;"><div xmlns="http://www.w3.org/1999/xhtml"><p style="margin-top: -480px;"><span style="height: 480px; display: inline-block;"></span>transparent</p></div></foreignObject></g></svg>