主页 / 问题 / 1142474
Accepted
Leks
Asked:2020-06-18 08:49:01 +0000 UTC2020-06-18 08:49:01 +0000 UTC

为什么 skew patternTransform 属性不起作用？

  • 772

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

svg

1 个回答

  1. Best Answer

    问题的作者自己已经找到了原因：

    错误是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 动画示例

    歪斜X

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

    偏斜

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

    旋转

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

    规模

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

    • 2

相关问题