SVG type Attribute
The type attribute is a non-specific attribute that has a different meaning according to the context in which it used.
- It defines the type of transformation, for the <animateTransform> element whose values change over time.
- It defines the type of matrix operation, for the <feColorMatrix> element.
- It defines the type of component transfer function, for the <feFuncG>, <feFuncB>, <feFuncR>, and <feFuncA> elements.
- It defines whether the filter primitive should perform a turbulence or noise function, for the <feTurbulence> element.
- It defines the content type of the element, for the <style> and <script> elements.
Syntax:
type = "value"
Attribute Values: The type attribute can be used with the following elements:
- <animateTransform>: This element include type attribute with values like translate, scale, rotate, skewX, skewY.
- <feColorMatrix> : This element include type attribute with values like matrix, saturate, hueRotate, luminanceToAlpha.
- <feTurbulence>: This element include type attribute with values like fractalNoise, turbulence.
- <feFuncR>, <feFuncG>, <feFuncB>, and <feFuncA>: These elements include type attribute with values like identity, table, discrete, linear, gamma.
Below examples illustrate the use of the type attribute.
Example 1:
<!DOCTYPE html><html> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <svg width="320" height="320" viewBox="20 30 120 120" <polygon points="60, 30 90, 90 30, 90" fill="green"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 60 70" to="360 60 70" dur="5s" repeatCount="indefinite" /> </polygon> </svg></body> </html> |
Output:
Example 2:
<!DOCTYPE html><html> <body> <div style="color: green; margin-left: 50px;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 480 100" <filter id="geek2" x="-20%" y="-20%" width="150%" height="150%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="5" result="turbulence" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="20" /> </filter> <polygon points="50, 9 60.5, 39.5 92.7, 40.1 67, 59.5 76.4, 90.3 50, 71.9 23.6, 90.3 32.9, 59.5 7.2, 40.1 39.4, 39.5" style="filter: url(#geek2);" fill="hsl(106, 80%, 50%)" /> </svg> </div></body> </html> |
Output:
Please Login to comment...