As in the marked region of the svg placed on the background image?

Question

As in the marked region of the svg placed on the background image?



 <svg width="1200px" height="260px"> 
 <pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
 <image href="00080028.jpg" x="0" y="0" width="1200" height="260"/>
 </pattern> 
 <polygon points="40 200,40 40, 1160 40,1160 200, 580 250," style="fill:#img1; fill-opacity:0.5; stroke: black;"/>
</svg>

This is the patern does not work

codepen.io/Geyan/pen/MeJQRP?editors=110 this is an example of work , that's the grey box have to do with the background , or the background to put the picture as here

Maybe someone will be useful :




 <meta charset="UTF-8">
<title></title>


<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="900px" height="300px">

 <pattern id="img1" patternUnits="userSpaceOnUse" width="900" height="300">
 <image href="pic.jpg" x="0" y="0" width="900" height="300"/>
</pattern>

 <polygon points="40 200, 
 40 40, 
 860 40,
 860 200,
 430 250,
 "style="fill:url(#img1)"/>
</svg>

The answer
That's what happens in the end :

SVG

Caesar.Keeli asked July 8th 19 at 11:57

Related questions

More answers about "As in the marked region of the svg placed on the background image?"

1 answer

Else.Mohr32 answered on · Accepted Answer · 2019-07-08T11:59:35.474Z

Else.Mohr32 answered on July 8th 19 at 11:59

Solution

Can offer your sample

Any advice:

Save svg to a file with the extension .svg
And put it on the background using background: url(... .svg) center no-repeat;

*

<svg width="1200px" height="260px" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"> 
<defs>
 <pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
 <image href="http://cdn.wall-pix.net/albums/people-models/00030952.Sao.Paulo.Indy.300.jpg" x="0" y="0" width="1200" height="260"/>
 </pattern> 
</defs>
 <polygon points="40 200,40 40, 1160 40,1160 200, 580 250," style="fill:#img1; fill-opacity:0.5; stroke: black;"/>
 </svg>

<---- Is transferred into the file and save it in .svg

: Kidding?! I already made what save! From svg to svg !!! - Else.Mohr32 commented on July 8th 19 at 12:02

difficult to disassemble! Can only serve as examples to help codepen.io/semenchenko/pen/wWgmxE . Either go to freelance that someone has decided if you can't understand! Examples the Internet is full + suggest generator clip-path generates ready-made solutions! - Else.Mohr32 commented on July 8th 19 at 12:05

: Elena thank you - Caesar.Keeli commented on July 8th 19 at 12:08

: I ready no , I love to understand and generators is also not necessary , only with zero - Caesar.Keeli commented on July 8th 19 at 12:11