svg速查

Posted on:September 7, 2023 at 02:43 AM
预计阅读时长：1 min read 字数：113

tags

<animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 60 70"
      to="360 60 70"
      dur="10s"
      repeatCount="indefinite" />

attribute

效果

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20"></feOffset>
      <feBlend in="SourceGraphic" in2="offOut" mode="normal"></feBlend>
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"></rect>
</svg>

blend-mode

feGaussianBlur/feColorMatrix/feOffset/feBlend

x1:x2:y1:y2:
0%的color100%的color
 
<svg height="150" width="400">
                <defs>
                    <linearGradient id="grad1" x1={x1 + '%'} y1={y1 + '%'} x2={x2 + '%'} y2={y2 + '%'}>
                        <stop offset="0%" style={{ stopColor: "rgb(255,255,0)", stopOpacity: 1 }}></stop>
                        <stop offset="100%" style={{ stopColor: "rgb(255,0,0)", stopOpacity: 1 }}></stop>
                    </linearGradient>
                </defs>
                <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)"></ellipse>
            </svg>

链接