Как я могу масштабировать растровое изображение в единицах пространства пользователя в SVG?

Question

Мой вопрос

Учитывая растровое изображение, где я знаю, сколько пикселей (px) соответствует сантиметру (см), и путь SVG, где я определяю единицы пространства пользователя в миллиметрах в окне просмотра, которое зависит от ширины браузера: Как я могу масштабировать изображение, чтобы оно всегда имело такое же соотношение пикселей на сантиметр, как и путь SVG?

Фон

У меня есть растровые изображения, которые представляют текстуры ткани, которые я хочу сопоставить с фигурами svg, которые представляют часть предмета одежды. Я хочу наложить ткань поверх фигуры, и для этого потребовались реалистичные пропорции фигуры и изображения, которые должны совпадать. Все это делается динамически, что означает, что я хочу решить эту проблему для общего случая, а не только для одной конкретной комбинации изображения и формы.

Пример

Я адаптировал мой общий и общий код для этой конкретной JS Fiddle, чтобы проиллюстрировать проблему и показать мой прогресс, а также то, где я застрял: 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>

Пока мне удалось добавить изображение в качестве шаблона, а затем заполнить форму ссылкой на URL. Что я не понимаю, так это как я могу сказать SVG, что 20,4 пикселя в этом изображении соответствуют 10 единицам пространства пользователя?

Answer 1

Облегчите свою жизнь и не пытайтесь сначала вписать изображение в шаблон, а затем многократно (хотя бы концептуально) встраивать этот шаблон в контур, чтобы у вас было всего три неявных преобразования размера для отслеживанияиз, когда все, что вам нужно, это правильно выбрать размер изображения.

Если я правильно вас понимаю, ваши единицы пространства пользователя должны равняться 1 мм.Затем, когда

• 2.04 пиксель изображения равен 1 мм, равно 1 единице пространства пользователя
• ваше изображение необходимо масштабировать на 1 / 2.04
• , чтобы масштаб изображения увеличился с 1440 ×От 1080 до 706 × 529 (округлено, preserveAspectRatio позаботится обо всем остальном)

Вместо того, чтобы подгонять заливку «узором» внутри пути, вы также можете вырезать форму пути изизображение с клип-траекторией- На самом деле это тот же процесс, что вырезать деталь из ткани, кстати ...

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