Почему атрибут skew patternTransform не работает?

Question

<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 patternTransform='skew(10)' id="a" x='5' y='5' width="40" height="40" patternUnits="userSpaceOnUse">
            <circle r="15" cx="15" cy="15" 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>

Answer 1

Автор вопроса уже сам нашёл причину:

ошибка была в том, что skew(10) надо исправить на skewX(10) или skewY(10)

Дополню это решение примерами с немного измененным кодом для симметричного расположения паттерна внутри прямоугольника

<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 patternTransform='skewX(10)' id="a" x='5' y='5' 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="2"/>
</svg>

Примеры анимации patternTransform

skewX

 <animateTransform begin="rect.mouseover" end="rect.mouseleave" 
    attributeName="transform" type="skewX"
    values="0;15;15;-15;-15;0"
    repeatCount="5" dur="2s"/>

<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='0' y='0' width="40" height="40"  patternUnits="userSpaceOnUse">
           
            <circle r="15" cx="20" cy="20" fill="url(#b)">
              <animateTransform begin="rect.mouseover" end="rect.mouseleave" attributeName="transform" type="skewX" values="0;15;15;-15;-15;0" repeatCount="5" dur="2s"/> 
            </circle>
         </pattern>
        </defs>

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

skewY

<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='0' y='0' width="40" height="40"  patternUnits="userSpaceOnUse">
           
            <circle r="15" cx="20" cy="20" fill="url(#b)">
              <animateTransform
                begin="rect.mouseover"
                end="rect.mouseleave"
                attributeName="transform"
                type="skewY"
                values="0;15;15;-15;-15;0"
                repeatCount="5"
                dur="2s"/> 
            </circle>
         </pattern>
        </defs>

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

rotate

<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='0' y='0' width="40" height="40" overflow="visible" patternUnits="userSpaceOnUse">
           
            <circle r="15" cx="20" cy="20" fill="url(#b)">
              <animateTransform
                begin="rect.mouseover"
                end="rect.mouseleave"
                attributeName="transform"
                type="rotate"
                values="0,20,20;360,20,20"
                repeatCount="5"
                dur="2s"/> 
            </circle>
         </pattern>
        </defs>

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

scale

<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='0' y='0' width="40" height="40" overflow="visible" patternUnits="userSpaceOnUse">
           
            <circle r="15" cx="20" cy="20" fill="url(#b)">
              <animateTransform
                begin="rect.mouseover"
                end="rect.mouseleave"
                attributeName="transform"
                type="scale"
                values="1;1.2;1.2;1;1"
                repeatCount="5"
                dur="2s"/> 
            </circle>
         </pattern>
        </defs>

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

БЛОГ НА HUSL

Почему атрибут skew patternTransform не работает?

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

Примеры анимации patternTransform