svg - сохранить исходный размер текстуры заливки при изменении размера пути - PullRequest
Новая
       35

svg - сохранить исходный размер текстуры заливки при изменении размера пути

0 голосов
/ 04 мая 2018

Я определяю SVG <pattern>, как это: 

<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
  <defs> 
    <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjEwcHgiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAgMTAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxjaXJjbGUgY3g9IjEuMjUiIGN5PSIxLjI1IiByPSIxLjI1Ii8+PHJlY3QgZmlsbD0ibm9uZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIi8+PC9zdmc+" 
        x="0" y="0" width="10" height="10">
      </image> 
    </pattern> 
  </defs> 
</svg>

визуально, это эквивалентно этому: enter image description here

Итак, я вызываю свой CSS для SVG в качестве заполнения: 

svg #VISUEL-3 * {fill: url(#circles-1);}

Я получаю довольно хороший результат: enter image description here

Но когда я отображаю свою графику меньше (1/4 в этом т. Е.), Заливка адаптируется следующим образом enter image description here

Трудно увидеть на скриншотах, потому что масштаб разбит из-за ширины 100% переполнения стека, но с векторным эффектом: не масштабирующий штрих отлично работает, поэтому штрихи имеют одинаковый размер между первым и вторым скриншотами а также число «1,2,3,4,5,6».

Итак, как вы видите, заливка адаптировалась ...

Можно ли сохранить такой же размер шаблона (одинаковый размер точек), как в css? Это выглядит беспорядочно визуально, когда у меня есть две графики, которые не имеют одинаковый размер и находятся рядом друг с другом ,

Правильно ли мой метод получить это? (Я готов изменить свой метод ..)

1 Ответ

0 голосов
/ 04 мая 2018

Элементы шаблона применяются к ссылочному элементу до преобразования элемента или одного из его родительских элементов - поэтому размер шаблона также изменяется. Единственный способ противодействовать этому - написать отдельный элемент шаблона для каждой используемой вами шкалы, включая patternTransform с обратной шкалой. К счастью, существует механизм клонирования шаблонов с атрибутом xlink:href. 

.simple {
    fill: url(#dots);
}
.quarter {
    fill: url(#quadrupleDots);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="150">
  <defs>
    <pattern id="dots" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle r="1.25" cx="1.25" cy="1.25" />
    </pattern>
    <pattern id="quadrupleDots" xlink:href="#dots" patternTransform="scale(4)" />
  </defs>
  <rect id="shape" class="simple" x="20" y="20" width="100" height="100" />
  <rect class="quarter" x="800" y="80" width="100" height="100" transform="scale(0.25)" />
</svg>
...