SVG Elements Examples

SVG <discard>

This are used to remove elements during the time.

Remove this After(3 sec)
<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle stroke-dasharray="2 3" cx="160" cy="190"  r="120" stroke="blue" stroke-width="9.8" fill="none">
  </circle>
  <g>
    <text x="90" y="130" stroke="none"> Remove this After(3 sec)</text>
  </g>
    <circle stroke-dasharray="2 3" cx="160" cy="190"  r="50" stroke="blue" stroke-width="9.8" fill="#c1a7ce">
        <discard begin="3s"></discard>
  </circle>
</svg>

SVG <symbol>

There are used to share shape in multiple times.

<svg width="300" height="340"  version="1.1"
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <symbol id="ellipseShap"  >
  <ellipse cx="150" cy="170" rx="100" ry="25"   ></ellipse>  
  </symbol>
    <use xlink:href="#ellipseShap" fill="#4ca6af8a" stroke="blue"  transform="translate(0,-130)"  ></use>
 <use xlink:href="#ellipseShap" fill="fuchsia"  transform="rotate(20,150,170)"  ></use>
 <use xlink:href="#ellipseShap" transform="rotate(110,150,170)" fill="#4caf50b8"  ></use> 
  <use xlink:href="#ellipseShap" transform="rotate(75,150,170)" fill="#673ab799"  ></use> 
</svg>

SVG <clipPath>

<svg width="300" height="200"  
     xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <clipPath id="items">
      <circle cx="40" cy="35" r="35" fill="red" ><animate attributeType="XML" attributeName="r" from="10" to="120"
        dur="7s" repeatCount="indefinite"></animate></circle>
  </clipPath>
  <rect stroke-width="2px" stroke="#e91e63" clip-path="url(#items)" id="shapes" x="30" y="20" width="100" height="100" fill="pink"></rect>
</svg>

© 2019, regularcodes.com, All rights reserved