How to place an image on the background in the marked area of svg?

A

A person from Kazakhstan2016-06-25 19:16:21

SVG

A person from Kazakhstan, 2016-06-25 19:16:21

<html lang="ru">
<body>
   <svg width="1200px" height="260px"> 
       <pattern id="img1" patternUnits="userSpaceOnUse" width="1200" height="260">
        <image xlink: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>
</body>
</html>

This very pattern does not work
codepen.io/Geyan/pen/MeJQRP?editors=110 this is an example of work, here this gray field should be made a background, more precisely, put an image on the background like here
Maybe it will come in handy for someone:

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns: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 xlink: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>
</body>
</html>

The answer is correct
Here's what happens in the end:

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

H

HamSter, 2016-06-25
@LenovoId

I can offer my example
Or advise:
Save the 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 xlink: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>

<---- Transfer this to a file and save it as .svg