Slavick Slavick - 8 days ago 3
HTML Question

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

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=""
width="100%" height="100%"
viewBox="0 0 1949 2220"
preserveAspectRatio="xMidYMid slice">
<pattern id="mirror" height="100%" width="100%"
viewBox="0 0 1 1"
preserveAspectRatio="xMidYMid slice">
<image xlink:href="mirror.jpg"
preserveAspectRatio="xMidYMid slice"
x="0" y="0"
width="1" height="1" />

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

and the page:

<div class="w3-container">
<div class="w3-row">
<div id="left_pallette" class="w3-quarter w3-border">
<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'"/>.
<div id="right_pallette" class="w3-quarter w3-border">

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


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" />