Wsrtjtyk

My Question

Given a raster image where I know how many pixels (px) correspond to a centimeter (cm) and an SVG path where I define the userspace units to be millimeters inside a viewbox that depends on the browser width: How can I scale the image so that it always has the same pixel per centimeter ratio as the SVG path?

Background

I have raster images that represent fabric textures that I want to match with svg shapes that represent a part of a piece of clothing. I want to overlay the fabric on top of the shape and for it took realistic the proportions of the shape and of the image have to match. This is all done dynamically meaning I want to solve this for the general case not just for one specific image and shape combination.

Example

I've adapted my generic and general code to this specific JS Fiddle to illustrate the problem and show my progress so far as well as where I am stuck:
http://jsfiddle.net/nx3vrz94/16/

 <svg id="svgView-1" style="width:90vw" viewBox="0 0 635 334" >

 <path fill-opacity="1" fill="url(#fabric1001)" d="M0 0 L635 0 L334 290 Z " id="1"></path>



 <!--

Image: 1440x1080

horizontally: 

2,5 cm = 51 pixel

= 20,4 pixel per cm

 -->

 <defs>

   <pattern id="fabric1001" 

   patternContentUnits="objectBoundingBox" 

   viewBox="0 0 1 1" 

   preserveAspectRatio="xMidYMid slice" 

   width="100%" height="100%">

   <image xlink:href="https://cdn.shopify.com/s/files/1/0081/1076/8185/products/3.jpg?v=1540031315"         

           x="0" y="0"

           width="1" 

           height="1"

           preserveAspectRatio="xMidYMid slice" />

  </pattern>



 </defs>

</svg>

So far I managed to add the image as a pattern and then fill the shape with an URL reference. What I don't understand is how I can tell SVG that 20.4 pixels in that image correspond to 10 user space units?

Make your life easier and do not try to first fit an image into a pattern, and then to fit that pattern repeatedly (at least conceptually) into a path, so that you have a total of three implicit size transformations to keep track of, when all you need is to size the image correctly.

If I understand you correctly, your userspace units should equal 1mm. Then, when

• 2.04 image pixel equals 1mm equals 1 userspace unit


• your image needs to be scaled by 1 / 2.04


• making your image scale from 1440 × 1080 to 706 × 529 (rounded, the preserveAspectRatio will take care of the rest)

Instead of fitting a "pattern" fill inside the path, you can also cut the path shape out of the image with a clip-path. - It is actually the same process as cutting a part out of a cloth, btw…

<svg id="svgView-1" style="width:90vw" viewBox="0 0 635 334" >

    <clipPath id="clip">

         <path d="M0 0 L635 0 L334 290 Z "></path>

    </clipPath>

    <image xlink:href="https://cdn.shopify.com/s/files/1/0081/1076/8185/products/3.jpg?v=1540031315"         

           x="0" y="0"

           width="706" height="529"

           preserveAspectRatio="xMidYMid slice"

           clip-path="url(#clip)"/>

</svg>