SVG - шаблон с фоном изображения - изображения не заполняются одинаково - адаптируются к форме, в которой они содержатся - PullRequest
Новая
       13

SVG - шаблон с фоном изображения - изображения не заполняются одинаково - адаптируются к форме, в которой они содержатся

0 голосов
/ 11 декабря 2018

Я пытаюсь заполнить области штатов по определенным критериям.У меня есть шаблон, и он работает, но кажется, что шаблон заполняет территорию, основываясь на форме территории.Я хочу, чтобы линии были одинаковыми, когда они заполняют каждую фигуру.На приведенной ниже карте видно, что линии не имеют одинаковую степень и не имеют одинаковый размер в каждом штате.Это возможно?Я новичок в SVG.

enter image description here

Шаблоны: 

<defs>
    <pattern id="pattern-stripe" width="5" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(75)">
        <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
    </pattern>
    <mask id="mask-stripe">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
    </mask>   
    <pattern id="other" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/other-stripe.png" />
    </pattern>
    <pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/blue-stripe.png" />
    </pattern>
    <pattern id="orange" height="100%" width="100%" patternContentUnits="objectBoundingBox">
        <image height="10" width="10" preserveAspectRatio="none" xlink:href="images/orange-stripe.png" />
    </pattern>


</defs>

Ответы [ 3 ]

0 голосов
/ 11 декабря 2018

Вы хотите preserveAspectRatio="xMinYMin slice".Meet изменит ваше соотношение сторон, пока минимум высоты или ширины не будет соответствовать ограничивающей рамке.Срез обрезает заливку до доступного пространства.

0 голосов
/ 12 декабря 2018

Ваша проблема в том, что ваши шаблоны используют patternContentUnits="objectBoundingBox".Это означает, что полосатое изображение в ваших шаблонах масштабируется в соответствии с размером формы, к которой применяется шаблон.

Демо: 

<svg>

  <defs>
    <pattern id="blue" height="100%" width="100%" patternContentUnits="objectBoundingBox">
       <image height="1" width="1" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" />
    </pattern>
  </defs>


  <rect x="0" y="0" width="150" height="150" fill="url(#blue)"/>
  <rect x="175" y="25" width="100" height="100" fill="url(#blue)"/>
</svg>

Чтобы исправить это, вам нужно использовать patternContentUnits, которые не зависят от размера фигуры, к которой применяется рисунок.Вы делаете это, указывая patternContentUnits="userSpaceOnUse". 

<svg>

  <defs>
    <pattern id="blue" height="100%" width="100%" patternContentUnits="userSpaceOnUse">
       <image height="150" width="150" preserveAspectRatio="none" xlink:href="http://placekitten.com/100/100" />
    </pattern>
  </defs>


  <rect x="0" y="0" width="150" height="150" fill="url(#blue)"/>
  <rect x="175" y="25" width="100" height="100" fill="url(#blue)"/>
</svg>
0 голосов
/ 11 декабря 2018

Я пытался повторить ошибку в CodePen, но без полного кода SVG это не сработало.Тем не менее, я думаю, что если вы замените preserveAspectRatio="none" на preserveAspectRatio="xMidYMid meet", это решит вашу проблему.Если это не так, но это делает успехи, попробуйте другие решения здесь .

...