A
A
aden2015-10-27 19:24:43
Images
aden, 2015-10-27 19:24:43

How to set background image in SVG path?

I can’t figure out SVG in any way, once I used it like this

<svg class="advert_image">			  
    <defs>
        <pattern id="image" patternUnits="userSpaceOnUse">
    <image height="180" width="263" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../images/hex1.png"></image>
  </pattern>
   </defs>
   <path id="svg_2" d="m0,50l132,-50l129,50l2,130l-264,0l1,-130z" fill="url(#image)"></path>
</svg>

but now it doesn’t work, the task is to crop a picture of a non-standard shape, for this I decided to set it as an SVG figure as a background, I can’t find a sensible SVG dock to get to know this beast.
I ask those who know to explain how to set a background image for an SVG shape or point to the norms of the SVG dock, or suggest how you can get an image / block with a non-standard IE9+ outline in another way, do not suggest tricks with css-border.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
aden, 2015-10-27
@aden

I answer the proposed example works if you specify for the pattern height="180" width="263" also the image lacks x="0" y="0" parameters, after that this code becomes working

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question