Category: svg

svg set.attribute

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>SVG</title>
  </head>
  <body>
    <svg width="600" height="300" onload="
      var c = document.getElementsByTagName('circle');
      for (var i=0; i<c.length; i++){
          c&#91;i&#93;.setAttribute('cx', r(600));
          c&#91;i&#93;.setAttribute('cy', r(400));
          c&#91;i&#93;.setAttribute('r', r(100));
          c&#91;i&#93;.setAttribute('fill', 'rgb('+r(255)+','+r(255)+','+r(255)+')');
      }
        function r(n){
          return Math.floor(Math.random() * (n + 1));
        }

    ">
      <rect width="300" height="300" fill="red" />
      <circle cx="100" cy="100" r="20" fill="white" />
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>
      <circle cx="100" cy="100" r="20" fill="white"/>

    </svg>
  </body>
</html>

svgで遊ぼう


%e7%84%a1%e9%a1%8c

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <text x="100" y="100" font-size="32" fill="white" stroke="black" stroke-width="2" rotate="20">
          Google
      <text>
    </svg>

transform

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <rect width="100" height="100" fill="green" transform="translate(50,50)" />
      <rect width="100" height="100" fill="green" transform="skewX(30)" />
      <rect width="100" height="100" fill="white" opacity="0.2" />
    </svg>

アニメーション

<svg width="600" height="300">
      <rect width="300" height="300" fill="red" />
      <circle cx="100" cy="100" r="20" fill="white">
          <animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite">
      </circle>
      <circle cx="200" cy="200" r="20" fill="blue">
          <animate attributeName="r" from="40" to="120" dur="2s" begin="1s" repeatCount="indefinite">
      </circle>
    </svg>

SVG

%e7%84%a1%e9%a1%8c

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
    </svg>

SVGでは後ろに書いたものが前に表示されます。

    <svg width="600" height="300">
      <rect width="100%" height="100%" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

viewBox:デバイスに合わせて反映

    <svg width="600" height="300" viewBox="0 0 400 200">
      <rect width="400" height="200" fill="red"/>
      <rect width="100" height="50" fill="blue"/>
    </svg>

色の設定

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red"/>
      <rect width="500" height="250" fill="#00ff00"/>
      <rect width="400" height="200" fill="rgb(0, 0, 255)"/>
      <rect width="300" height="150" fill="rgba(255,255,255,0.4)"/>
    </svg>

枠線

    <svg width="600" height="300">
      <rect width="600" height="300" fill="red" stroke="black" stroke-width="10"/>
    </svg>

sytle属性による記述

    <svg width="600" height="300">
      <rect width="600" height="300" style="fill:red; stroke:black; stroke-dasharray:20,5"/>
    </svg>

cssのような書き方

    <svg width="600" height="300">
        <style type="text/css"><!&#91;CDATA&#91;
    #myBox{
      fill:red;
      stroke:black;
    }
        &#93;&#93;></style>
      <rect width="600" height="300" id="myBox">
    </svg>

gタグ

    <svg width="600" height="300">
    <g stroke="black">
      <rect width="600" height="300" fill="red" />
      <rect width="500" height="200" fill="green" />
      <rect width="400" height="100" fill="white"/>
    </g>
    </svg>

グラデーション

    <svg width="600" height="300">
    <defs>
        <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

円形グラデーション

    <svg width="600" height="300">
    <defs>
        <radialGradient id="g1" cx="0.5" cy="0.5" r="0.5"> 
            <stop offset="0" stop-color="skyblue" />
            <stop offset="0.5" stop-color="pink" />
            <stop offset="1" stop-color="yellow" stop-opacity="0.5"/>
        </linearGradient>
    </defs>
      <rect width="600" height="300" fill="url(#g1)" />
    </svg>

stroke

<line x="100" y1="100" x2="200" y2="200" stroke-width="20" stroke="black" stroke-linecap="raound"  />

circle, ellipse

<circle cx="200" cy="100" r="40" fill="white" />
      <ellipse cx="400" cy="100" rx="40" ry="80" fill="green" />

polygon, polyline, path

      <polyline points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <polygon points="100 50 150 100 50 100" stroke="black" fill="none"/>
      <path d="M100 50 l50 50 h100 v100 h100" stroke="black" fill="none"/>