How to put a border / Stroke in an <image> in an SVG?

Asked

Viewed 111 times

4

I need to add one stroke around a <image> within a <svg>. But nothing happens when you add the value to that tag.

See below what happens: when I use on <image> does not work, but in <rect> works.

Example:

.my-svg{
  stroke: red;
  stroke-width: 3px;
}
<svg class="my-svg">
  <image y="0" x="0" height="100" width="100" href="https://i.stack.imgur.com/eJaft.jpg" />
</svg>

<svg class="my-svg">
  <rect height="50" width="50"></rect>
</svg>

In that case, what could be done to insert a stroke in the image?

html5 image svg
  • 1

    I posted a reply an answer unintentionally :/ , want to run snipped and clicked without thinking. Anyway, see if this helps you: https://stackoverflow.com/questions/13217669/svg-image-with-a-borderstroke

  • 1

    @Miguel publishes it translated to nóis ;p

  • I’m working on it, it’s personal now lol, pride speak out now

1 answer

4


It is possible if you use one pattern within svg linking the image in Shape (rect, Polygon, Circle, even path works).

First you create the definition <defs> then the <pattern> and puts the image that will be the BG <image> Then you use the Pattern-img as fill of the element fill="url(#ID-do-pattern)"

See in the example to better understand.

<svg xmlns="http://www.w3.org/2000/svg" id="svg2" version="1.1" width="900px" height="611px" viewBox="0 0 900 611">
    <defs>
        <pattern id="p2" x="0" y="0" height="1" width="1">
            <image x="0" y="0" xlink:href="https://unsplash.it/300/300"></image>
        </pattern>
    </defs>

    <rect x="0" y="0" width="300px" height="100px" fill="url(#p2)" stroke="black" />

    <rect x="0" y="110" width="150" height="200" fill="url(#p2)" stroke="red" stroke-width="2" />

    <circle cx="250" cy="200" r="70" fill="url(#p2)" stroke="blue" stroke-width="3"/>

    <polygon points="300,300, 250,390, 180,420, 100,400, 200,270" fill="url(#p2)" stroke="green" stroke-width="4"/>

    <path d="M350 400 L475 300 L225 200 Z" fill="url(#p2)" stroke="red" stroke-width="8" />
</svg>

Link I used base to do

  • 1

    I like the placecage, kkkkk

  • @Wallacemaxters next time I’ll use that photo of Caetano Veloso :D

Browser other questions tagged html5 image svg

You are not signed in. Login or sign up in order to post.