Slavick Slavick - 4 months ago 13
HTML Question

Why the pattern image of my SVG is larger than the path made of it?

everyone!
I think I've got a problem here:
enter image description here

Following this tutorial, I made a path from an image (the mirror's frame) and also applied the image as a fill pattern for the svg path. I don't understand why the pattern image end up bigger, like you see on the pic. Here are the markups:

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%"
viewBox="0 0 1949 2220"
preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="mirror" height="100%" width="100%"
patternContentUnits="userSpaceOnUse"
viewBox="0 0 1 1"
preserveAspectRatio="xMidYMid slice">
<image xlink:href="mirror.jpg"
preserveAspectRatio="xMidYMid slice"
x="0" y="0"
width="1" height="1" />
</pattern>
</defs>

<path .................


and the page:

<div class="w3-container">
<div class="w3-row">
<div id="left_pallette" class="w3-quarter w3-border">
</div>
<div id="mirror" class="w3-half">
<object id="mirror_object" type="image/svg+xml" data="mirror_frame.svg">
<img src="mirror_frame.svg" onerror="this.src='mirror.jpg'"/>.
</object>
</div>
<div id="right_pallette" class="w3-quarter w3-border">
</div>
</div>
</div>


I would appreciate any ideas on how to fix this issue.
Thanks!

Answer Source

Your pattern is defined differently from the tutorial. Have you tried doing it the way they suggest?

<pattern id="mirror" patternUnits="userSpaceOnUse" width="1949" height="2220">
  <image xlink:href="mirror.jpg" x="0" y="0" width="1949" height="2220" />
</pattern>