Grens toevoegen aan SVG-afbeelding

Is het mogelijk om een ​​SVG-afbeelding in een rand in te wikkelen (dat is – een rand van CSS in de buurt van die afbeelding).


Antwoord 1, Autoriteit 100%

Teken een <rect>rond de afbeelding die vult is = “Geen”. U kunt de slag van de <rect>als de grens gebruiken.


Antwoord 2, Autoriteit 21%

Hier zijn enkele voorbeelden, getest in Firefox:

<svg width="100" height="100" style="border:1px solid black">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<br><br>
<svg width="300" height="100" style="border:1px solid black">
<rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>
<br><br>
<svg width="170" height="170" style="border:1px solid black">
<rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>

Ik hoop dat het helpt. 🙂

Other episodes