How to place an image inside the SVG?

Asked

Viewed 341 times

1

Eae Personal, I’m having a difficulty, I’m wanting to put an image inside my svg but I can’t, someone could help me ?

Follows my code: 

<svg version="1.0"
        xmlns="http://www.w3.org/2000/svg"
        width="988.000000pt"
        height="570.000000pt"
         viewBox="0 0 988.000000 570.000000"
         preserveAspectRatio="xMidYMid meet"
         id="{{ pillar }}">
          <defs>
            <pattern id="imgPillar02" x="0" y="0" height="1" width="1">
                <image width="100%" xlink:href="https://i.stack.imgur.com/KKm5N.jpg"></image>
            </pattern>
        </defs>
            <g transform="translate(0.000000,570.000000) scale(0.100000,-0.100000)"
            fill="url(#imgPillar02)">
            <path d="M856 4834 l-859 -862 209 -224 c114 -122 285 -304 379 -403 277 -293
            319 -338 357 -385 20 -25 85 -94 144 -155 93 -96 257 -271 923 -985 79 -85
            226 -243 325 -350 100 -107 246 -265 326 -350 80 -86 194 -209 255 -275 60
            -66 150 -163 200 -215 50 -52 136 -144 190 -204 55 -61 123 -133 150 -162 28
            -28 67 -71 88 -95 20 -24 62 -72 94 -107 l56 -62 3094 0 3093 0 0 2850 0 2850
            -4082 -1 -4083 -2 -859 -863z"/ stroke="red" stroke-width="20" fill="url(https://i.stack.imgur.com/KKm5N.jpg)">
            </g>
        </svg>

I appreciate the help!

html css svg

1 answer

1


Face SVG is something I know little about, but this template should help you. How do you tag path I was wrong, I had a / in the middle of the code. And the fill that you used in the path is unnecessary since you put the fill in the <g>. To better understand why Fill should be used on or do not look at this example from @Guilhermenascimento https://codepen.io/brcontainer/pen/PoYXoeE

But regardless, to function I had to redo the path and the result was like this.

<svg width="988" height="570" viewbox="0 0 988 570" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <pattern id="pattern0" height="1" width="1">
            <image height="100%" xlink:href="https://i.stack.imgur.com/KKm5N.jpg"></image>
        </pattern>
    </defs>
    <path d="M0.724889 189.049L228.8 0.5H987.5V569.5H350.703L0.724889 189.049Z" fill="url(#pattern0)" stroke="red" stroke-width="10" />
</svg>

inserir a descrição da imagem aqui

  • Dear Hugo, Fill can go on <g>, so much so that if there is more than one element in the group they will inherit "Fill", which makes it much easier (if it is the intention) to add the same Fill in several elements, for example: https://codepen.io/brcontainer/pen/PoYXoeE

  • @Guilhermenascimento very interesting! I had no idea it would work this way! I will correct in the answer :)

  • 1

    You can copy the entire example to the stacksnippet if you want :)

  • @Guilhermenascimento is there, thanks to the tip. I just haven’t figured it out yet because I couldn’t render the image in the path/g of its code and had to redo the path to work :/

  • I haven’t looked at his code yet, I’ll take it easy, if it’s something simple I’ll comment to you and you edit the answer adding details.

  • @Guilhermenascimento nada, ai vc posta a reply Hi, I know you will have much more to add :D SVG is still a little obscure for me. I wanted a book in preference to study it

  • I found out, it was what I suspected, the area that corresponds to his Fill are just "lines", the middle part of it is "leaked", so it won’t work in his code, ie the outline is actually the area and the middle has nothing, problem in his path.

  • @Guilhermenascimento is just that, by the amount of points of the vector already gives to have an idea, and as the stocke of 20 was to have become much thicker the line tb. But the strange thing is that if you put a solid color Fill like fill="green" his svg is thus filled... http://prntscr.com/p926rc

  • 1

    Aaah got it, thank you so much for your help, it worked :)

  • 1

    Dear Hugo, it really is not at the ends, the problems is how the points are "connected", it seems that there is more than one path, but in fact it is how they are interconnected, as if they change direction (totally the other way around) the tip of the house, looking even a "folding", see the result with the same path as it: https://codepen.io/brcontainer/pen/oNvJZmd

Show 5 more comments

Browser other questions tagged html css svg

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