在缩放的svg中使用栅格图像作为平铺背景

Question

I am stuck trying to get the following to work:

• An embedded svg picture, in an html5 document.
• It has a single polygon (a triangle), taking all the svg viewport: ◤
• This should extend to take full height of its container.

So far so good, this example does the job:

 #container { position: relative; width: 5em; height: 5em; resize: both; overflow: hidden; // so we can play with it in demo } #triangle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; fill: #00f; pointer-events: none; // so we can grab the resize handle } 

 <div id="container"> <svg id="triangle" viewBox="0 0 10 10" preserveAspectRatio="none"> <polygon points="0,0 0,10 10,0" /> </svg> </div> 

Try grabbing the resize handle to see how the triangle reacts to changes in container size.

There is just one last thing I miss and cannot figure out how to do:

• The triangle must be textured using a raster image (png file)
• That texture must not be scaled.

So far my best attempt was using the initial coordinate system (no viewPort directive), to apply a filter to a square, like this:

 #container { position: relative; width: 5em; height: 5em; resize: both; overflow: hidden; // so we can play with it in demo } #triangle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; // so we can grab the resize handle } 

 <div id="container"> <svg id="triangle" preserveAspectRatio="none"> <defs> <filter id="Tiled"> <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png" x="0" y="0" width="100" height="100" result="texture"/> <feTile in="texture" x="0" y="0" width="100%" height="100%"/> </filter> </defs> <rect filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/> </svg> </div> 

Again, try resizing the image using the (invisible) handle at the bottom-right corner: the background texture gets tiled.

Thus the question:

The second example works thanks to the width="100%" . However, polygons do not accept percentage coordinates.

→ How to achieve the tiling behavior of the second example, but on a dynamically sized polygon like first example?

Answer 1

You just need a polygon to clip the rect to get the effect you want don't you?

 #container { position: relative; width: 5em; height: 5em; resize: both; overflow: hidden; // so we can play with it in demo } #triangle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; // so we can grab the resize handle } 

 <div id="container"> <svg id="triangle" preserveAspectRatio="none"> <defs> <filter id="Tiled"> <feImage xlink:href="https://www.w3.org/TR/SVG/images/filters/smiley.png" x="0" y="0" width="100" height="100" result="texture"/> <feTile in="texture" x="0" y="0" width="100%" height="100%"/> </filter> <clipPath id="clip" clipPathUnits="objectBoundingBox"> <polygon points="0,0 0,1 1,0" /> </clipPath> </defs> <rect clip-path="url(#clip)" filter="url(#Tiled)" x="0" y="0" width="100%" height="100%"/> </svg> </div>