БЛОГ НА HUSL


Из-за чего в pattern не хватает места для фигуры

Автор вопроса: Leks 

<svg viewBox="0 0 1000 400" width='1000' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='10' y='10' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="10" cy="10" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="2"/>
</svg>


Источник

Ответы (1 шт):

Автор решения: Alexandr_TT

Представьте, что паттерн это одна кафельная плитка, которую вы будете укладывать на стенку определенных размеров. Теория здесь и здесь В вашем примере, квадрат (стенка) имеет размеры 200 х 200 px, следовательно при размере
40 x 40 px паттерна (одной плитки), войдет 5 плиток по ширине и 5 рядов по высоте.

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

Чтобы облегчить расчеты положения центра окружности и её радиуса, располагайте её по центру паттерна.

<pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
</pattern>

Я выбрал радиус 18px, а не 20px, чтобы обеспечить зазор 1px по краям.

Одна плитка

<svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="40" height="40" fill="url(#a)" stroke="black" stroke-width="0.5px"/>
</svg>

Пример многократного размещения паттерна в квадрате 200 x 200px

<svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="18" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="0.5"/>
</svg>

Пример с радиусом (как в вопросе) 15px

<svg viewBox="0 0 400 400" width='400' height='400' style='border:1px solid black'>
  
  <defs>
    <linearGradient id='b'>
      <stop offset='20%' stop-color='green'></stop>
      <stop offset='40%' stop-color='blue'></stop>
      <stop offset='60%' stop-color='red'></stop>
      <stop offset='80%' stop-color='yellow'></stop>
      <stop offset='100%' stop-color='tomato'></stop>
    </linearGradient>
  </defs>

        <defs>
          <pattern id="a" x='0' y='0' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="20" cy="20" fill="url(#b)" stroke="" stroke-width=""/>
          </pattern>
        </defs>

  <rect x="0" y="0" width="200" height="200" fill="url(#a)" stroke="black" stroke-width="0.5"/>
</svg>

Примеры анимации паттерна

Используется точечный паттерн и анимация маски

<svg viewbox="0 0 100 100">
        <defs>

            <pattern
                    id="dotted-pattern"
                    viewbox="0,0,100,100"
                    height="3.125%"
                    width="3.125%">
                <circle cx="50" cy="50" fill="#10446D" r="12"/>
                    
            </pattern>
            <mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
                <circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
            <animate
                        attributeName="r"
                        values="0.01; 38.48"
                        dur="3s"
                        begin="0s"
                        repeatCount="1"
                        fill="freeze" />
          </circle>
            </mask>
        </defs>
    
        <rect
                width="74"
                height="74"
                y="13"
                x="13"
                mask="url(#circle-mask)"
                fill="url(#dotted-pattern)"></rect>
        
        
    </svg>

Используется SMIL анимация вращения и изменения цвета

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="350">
<defs>
<pattern id="motif" x="0" y="0" width="30" height="30" overflow="visible" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet">
<rect x="0" y="0" width="30" height="30" style="stroke:yellow;stroke-width:1;fill:yellow"/>
<circle cx="22" cy="15" r="7" style="stroke:black;stroke-width:1;fill:green">
<animateTransform begin="GO.click" attributeName="transform" type="rotate" values="0,15,15;360,15,15" repeatCount="2" dur="2s"/>
<animate begin="GO.click" attributeName="fill" values="green;red;green" repeatCount="2" dur="2s"/>
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#motif)"/>
<rect id="GO" x="210" y="330" width="50" height="18" opacity="0.3"/>
<text x="235" y="345" text-anchor="middle" font-size="15" fill="white" pointer-events="none">GO</text>
</svg>

Более сложная, комплексная анимация паттерна

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="350">
<defs>
<pattern id="motif" x="0" y="0" width="30" height="30" overflow="visible" patternUnits="userSpaceOnUse" preserveAspectRatio="xMidYMid meet">
<animate begin="GO.click" attributeName="width" values="30;8;30" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="height" values="30;8;30" repeatCount="1" dur="4s"/>
<rect x="0" y="0" width="30" height="30" style="stroke:black;stroke-width:1;fill:yellow">
<animate begin="GO.click" attributeName="width" values="30;8;30" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="height" values="30;8;30" repeatCount="1" dur="4s"/>
</rect>
<circle cx="15" cy="15" r="13" style="stroke:black;stroke-width:1;fill:green">
<animate begin="GO.click" attributeName="r" values="13;2;13" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="cx" values="15;4;15" repeatCount="1" dur="4s"/>
<animate begin="GO.click" attributeName="cy" values="15;4;15" repeatCount="1" dur="4s"/>
</circle>
</pattern>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#motif)"/>
<rect id="GO" x="210" y="330" width="50" height="18" fill="black"/>
<text x="235" y="345" text-anchor="middle" font-size="15" fill="white" pointer-events="none">GO</text>
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.