lundi 13 février 2023

Reusing symbol in SVG pattern

I found that symbol reused in pattern looks blurry.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70mm" height="84mm">

<defs>
<symbol id="Pole" viewBox="0 0 30 30">
    <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/> 
</symbol>

<pattern id="Poles_StepDependedWidth" x="0" y="0" width=".25" height="1" patternUnits="objectBoundingBox">
    <rect height="100%" width="100%" fill="red" opacity="0.25" />
    <use href="#Pole" width="7mm" height="7mm" />
</pattern>
</defs>

<rect x="7mm" y="4.5mm" height="7mm" width="70mm" fill="url(#Poles_StepDependedWidth)"/>
<use href="#Pole" x="0" y="4.5mm" width="7mm" height="7mm" />

</svg>

Playng with combination of patternUnits, viewBox (for pattern and symbol) didn't fix the blurring symbol in pattern (with red background).

Aucun commentaire:

Enregistrer un commentaire