WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

SVGを使ったアニメーション

HTML5+CSS3

http://carlphilippebrenner.com/portfolio/beatricecreationscarlphilippebrenner.com

tympanus.net

gardenstudio.com.br


SVGとは？

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー


blog.codecamp.jp




今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEとOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。


変化させる方法は主に以下の3つがあります。

CSSプロパティ（transitionやanimation）を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います（ちなみにjQueryはSVGの要素を扱えないので使えません）。


SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke：線の色
stronke-width：線の太さ
fill：塗りつぶしの色
stroke-dasharray：破線の間隔
stroke-dashoffset：破線の開始位置


今回は破線のプロパティである、stroke-dasharrayとstroke-dashoffsetを使い、線を引くアニメーションを作成します。





また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。
none（初期値）

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。





<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SVGのアニメーション</title>
<style>
body {
  background: #092951;
}
.box{
    width: 800px;
    height: 500px;
    margin: 50px auto;
}
.line {
  stroke:#fff; /*線の色*/
  stroke-width:1; /*線の太さ*/
  fill:#092951; /*塗りの色(bodyの背景色を指定する)*/
  stroke-dasharray:3000; /*破線の間隔*/
  stroke-dashoffset:3000; /*破線の開始位置*/
  -webkit-animation:DASH 2s ease-in-out 1s forwards;
  animation:DASH 2s ease-in-out 1s forwards;
}
@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    70% {stroke-dashoffset:1000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}
@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    70% {stroke-dashoffset:1000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

.bd{
    width: 640px;
    height: 100%;
    text-align: center;
    position: relative;
    padding: 10px 0;
}
div.bd div {
  background: #fff;
  position:absolute;
  transition:all 0.3s ease-in-out 0.3s;
}
.bd div.bdT{
  width: 0; height:1px; top:0; left:0;}
.bd div.bdB{
  width: 0; height:1px; bottom:0; right:0;}
.bd div.bdR{
  height:0; width :1px; right:0; top:0;}
.bd div.bdL{
  height:0; width :1px; left:0; bottom:0;}
.box:hover .bd div.bdT{width: 100%;}
.box:hover .bd div.bdB{width: 100%;}
.box:hover .bd div.bdR{height:100%;}
.box:hover .bd div.bdL{height:100%;}
</style>

</head>
<body>
<div class="box">
<div class="bd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="800px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<path class="line" d="M259.933,141.201l-9.209,39.868h-8.423c-0.3-8.01-2.004-14.954-5.112-20.833c-3.107-5.876-6.908-9.153-11.4-9.827
	c-2.323-0.298-5.038-0.523-8.146-0.674c-3.108-0.149-6.684-0.225-10.727-0.225h-27.297l-14.979,64.8h18.366
	c4.357,0,8.338-0.467,11.944-1.404c3.604-0.935,7.098-2.9,10.479-5.896c1.727-1.572,3.661-4.117,5.801-7.637
	c2.141-3.518,3.85-7.261,5.127-11.23h8.423l-14.375,62.554h-8.423c0.074-0.898,0.168-1.946,0.281-3.145
	c0.112-1.197,0.168-2.507,0.168-3.931c0-2.095-0.151-4.492-0.449-7.188c-0.3-2.695-0.862-4.717-1.685-6.064
	c-2.023-3.069-4.645-5.09-7.865-6.064c-3.22-0.972-7.039-1.46-11.457-1.46h-18.309l-12.903,55.816
	c-0.151,0.6-0.263,1.217-0.337,1.853c-0.075,0.638-0.112,1.255-0.112,1.853c0,1.648,0.337,3.089,1.011,4.324
	s1.834,2.341,3.481,3.313c1.197,0.601,3.555,1.236,7.075,1.91c3.519,0.674,6.401,1.086,8.647,1.234l-1.797,7.412H98.326l1.797-7.412
	c2.32-0.148,5.315-0.393,8.984-0.729c3.667-0.337,6.177-0.767,7.524-1.292c2.62-1.047,4.604-2.526,5.952-4.436
	s2.32-4.173,2.92-6.795l26.843-116.123c0.149-0.748,0.281-1.478,0.393-2.19c0.112-0.71,0.168-1.44,0.168-2.19
	c0-1.497-0.281-2.788-0.842-3.875c-0.562-1.084-1.741-2.078-3.538-2.976c-1.648-0.898-4.082-1.721-7.3-2.471
	c-3.22-0.748-5.916-1.235-8.086-1.46l1.797-7.412H259.933z"/>
<path class="line" d="M344.049,210.531c0,7.949-2.49,14.775-7.468,20.475c-4.98,5.699-12.224,10.237-21.731,13.61
	c-6.963,2.551-14.001,4.613-21.113,6.189c-7.114,1.576-14.975,2.887-23.584,3.936c0,11.831,2.19,20.871,6.57,27.122
	c4.38,6.253,10.799,9.378,19.26,9.378c7.486,0,14.094-1.871,19.822-5.615c5.728-3.743,11.36-9.322,16.902-16.734l6.401,4.717
	c-5.991,9.136-13.477,16.436-22.461,21.9c-8.984,5.464-18.306,8.197-27.964,8.197c-13.252,0-23.379-3.709-30.378-11.129
	c-7.001-7.418-10.5-17.947-10.5-31.587c0-9.442,1.478-18.455,4.436-27.036c2.957-8.581,7.28-16.43,12.971-23.55
	c5.54-6.97,12.334-12.59,20.383-16.862c8.047-4.271,16.938-6.408,26.672-6.408c10.781,0,18.772,2.193,23.977,6.581
	C341.446,198.101,344.049,203.707,344.049,210.531z M323.385,207.77c0-2.913-0.413-5.21-1.235-6.891
	c-0.825-1.681-1.873-2.932-3.145-3.753c-1.348-0.897-2.771-1.457-4.268-1.681c-1.499-0.225-3.032-0.337-4.604-0.337
	c-8.984,0-17.277,4.931-24.875,14.792c-7.6,9.862-12.41,22.15-14.431,36.868c5.24-0.748,11.155-1.811,17.744-3.194
	c6.587-1.381,12.053-3.192,16.396-5.434c6.213-3.211,10.837-7.34,13.87-12.384C321.869,220.712,323.385,214.718,323.385,207.77z"/>
<path class="line" d="M416.041,128.398L384.64,263.613c-0.678,2.846-1.314,5.69-1.915,8.535c-0.6,2.846-0.9,5.166-0.9,6.963
	c0,4.268,0.953,7.188,2.858,8.76c1.906,1.572,4.991,2.357,9.251,2.357c1.493,0,3.716-0.186,6.67-0.561
	c2.952-0.374,5.176-0.823,6.671-1.348l-1.685,7.188c-6.738,2.695-11.924,4.604-15.554,5.727c-3.632,1.123-7.731,1.686-12.297,1.686
	c-5.991,0-10.539-1.555-13.645-4.664c-3.108-3.109-4.661-6.949-4.661-11.52c0-1.723,0.168-3.52,0.505-5.394
	c0.337-1.872,0.804-4.232,1.404-7.081l27.371-118.335c0.525-2.323,0.881-3.934,1.069-4.833c0.186-0.898,0.281-2.023,0.281-3.373
	c0-2.695-0.451-4.774-1.353-6.236c-0.902-1.46-2.181-2.565-3.834-3.314c-1.58-0.674-3.573-1.125-5.98-1.35
	c-2.407-0.225-4.852-0.486-7.333-0.786l1.576-6.851l41.776-2.471L416.041,128.398z"/>
<path class="line" d="M476.007,288.32l-1.685,7.188c-6.889,2.771-12.393,4.699-16.509,5.783c-4.118,1.084-7.637,1.629-10.557,1.629
	c-5.991,0-10.483-1.557-13.477-4.666c-2.995-3.109-4.492-6.951-4.492-11.523c0-1.724,0.149-3.522,0.449-5.396
	c0.298-1.874,0.786-4.234,1.46-7.084l11.865-47.782c0.598-2.622,1.176-5.433,1.738-8.431c0.561-2.998,0.842-5.547,0.842-7.646
	c0-4.196-0.693-6.988-2.076-8.374s-4.204-2.081-8.463-2.081c-1.645,0-3.83,0.263-6.558,0.786c-2.728,0.525-4.802,0.974-6.221,1.348
	l1.685-7.188c5.836-2.62,11.074-4.566,15.714-5.84c4.64-1.272,8.308-1.909,11.003-1.909c6.136,0,10.59,1.462,13.358,4.385
	s4.153,6.857,4.153,11.804c0,1.35-0.15,3.187-0.449,5.51c-0.3,2.323-0.749,4.647-1.348,6.97l-11.934,47.78
	c-0.744,2.923-1.396,5.79-1.953,8.602c-0.559,2.812-0.836,5.115-0.836,6.914c0,4.272,0.951,7.196,2.854,8.771
	s4.982,2.359,9.235,2.359c1.416,0,3.448-0.186,6.099-0.561C472.555,289.294,474.589,288.845,476.007,288.32z M483.98,144.682
	c0,4.268-1.387,7.993-4.155,11.174c-2.771,3.183-6.216,4.773-10.332,4.773c-3.818,0-7.114-1.516-9.883-4.548
	c-2.771-3.032-4.155-6.494-4.155-10.388c0-4.117,1.385-7.71,4.155-10.781c2.769-3.069,6.064-4.604,9.883-4.604
	c4.268,0,7.749,1.442,10.444,4.324C482.633,137.514,483.98,140.864,483.98,144.682z"/>
<path class="line" d="M532.496,303.705c-13.104,0-23.454-3.821-31.053-11.465c-7.6-7.645-11.398-18.512-11.398-32.6
	c0-9.368,1.44-18.343,4.324-26.924c2.881-8.581,6.906-16.205,12.072-22.877c5.166-6.668,11.697-12.12,19.598-16.354
	c7.897-4.234,16.677-6.352,26.335-6.352c10.706,0,18.848,2.266,24.427,6.794c5.576,4.531,8.366,10.239,8.366,17.126
	c0,5.166-1.218,9.697-3.649,13.589c-2.435,3.894-6.084,5.84-10.95,5.84c-4.043,0-7.075-1.007-9.097-3.021
	c-2.021-2.015-3.032-4.254-3.032-6.717c0-2.388,0.81-5.654,2.427-9.795c1.618-4.141,2.906-7.482,3.862-10.021
	c-0.825-2.014-2.659-3.486-5.503-4.42c-2.846-0.934-5.803-1.4-8.872-1.4c-10.183,0-18.962,5.935-26.335,17.8
	c-7.376,11.868-11.063,26.411-11.063,43.63c0,10.633,2.379,19.074,7.143,25.325c4.762,6.253,11.193,9.378,19.293,9.378
	c7.273,0,13.742-1.946,19.404-5.84c5.66-3.893,11.079-9.396,16.254-16.51l6.412,4.717c-5.166,8.162-12.186,15.218-21.057,21.17
	C551.531,300.729,542.229,303.705,532.496,303.705z"/>
<path class="line" d="M664.921,285.721h-0.784c-1.646,1.35-3.607,3.055-5.889,5.115s-4.954,4.027-8.02,5.901
	c-2.916,1.874-6.093,3.503-9.532,4.889s-7.179,2.079-11.216,2.079c-10.842,0-19.347-3.895-25.515-11.689
	c-6.17-7.795-9.253-18.436-9.253-31.926c0-9.294,1.72-18.324,5.162-27.092c3.441-8.767,8.191-16.637,14.252-23.607
	c5.762-6.668,12.607-12.044,20.539-16.13c7.93-4.085,16.085-6.127,24.466-6.127c5.31,0,10.38,0.712,15.205,2.136
	c4.825,1.425,8.623,3.036,11.392,4.833l20.611-5.284l1.352,1.687l-17.109,72.517c-0.6,2.323-1.217,5.154-1.853,8.489
	c-0.638,3.336-0.954,5.791-0.954,7.363c0,4.272,0.898,7.159,2.697,8.657c1.798,1.499,4.836,2.248,9.109,2.248
	c1.426,0,3.452-0.225,6.077-0.674c2.626-0.449,4.649-0.935,6.075-1.459l-1.688,7.188c-6.753,2.695-11.78,4.643-15.081,5.84
	c-3.301,1.196-7.313,1.797-12.04,1.797c-5.402,0-9.679-1.574-12.828-4.721C666.945,294.602,665.221,290.592,664.921,285.721z
	 M681.105,214.671c0-2.473-0.264-4.833-0.787-7.083c-0.523-2.25-1.61-4.348-3.258-6.298c-1.499-1.874-3.559-3.373-6.181-4.497
	c-2.622-1.123-5.917-1.687-9.886-1.687c-5.471,0-10.789,1.8-15.957,5.397c-5.169,3.598-9.813,8.432-13.931,14.503
	c-3.896,5.698-7.08,12.594-9.551,20.688c-2.473,8.097-3.708,16.304-3.708,24.623c0,4.573,0.262,8.621,0.784,12.145
	s1.532,6.745,3.027,9.669c1.419,2.85,3.474,5.061,6.164,6.635s6.091,2.359,10.2,2.359c4.184,0,8.574-1.179,13.17-3.541
	c4.596-2.361,9.771-6.503,15.526-12.426L681.105,214.671z"/>
</svg>
<div class="bdT"></div>
<div class="bdB"></div>
<div class="bdR"></div>
<div class="bdL"></div>
</div> <!--/.bd-->
</div> <!--/.box-->
</body>
</html>

生徒の作例

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>AKIRAsvg</title>
</head>
<style>
body {
  background:#000;
  }
.box {
  width: 500px;
  height: 300px;
  margin: 150px auto;
}
.japanese{
  width: 500px;
  height: 300px;
  margin: 100px auto;
  margin-top: -250px;
}
.line {
  stroke:#fff;/*線の色*/
  stroke-width:0.5;/*線の太さ*/
  fill:#000;/*塗りつぶしの色（bodyと同じ色を指定）*/
  stroke-dasharray: 3000;/*破線の間隔*/
   stroke-dashoffset: 3000;/*破線の開始位置*/
  animation:DASH 6s ease-in-out 1s forwards;
  }

@keyframes DASH{
  0%{stroke-dashoffset:3000;fill:#000;}
  50%{stroke-dashoffset:2000;fill:#000;}
  100%{stroke-dashoffset:0;fill:#fff;}
}

  
.red{
  stroke:#C00;/*線の色*/
  stroke-width:0.5;/*線の太さ*/
  fill:none;/*塗りつぶしの色（bodyと同じ色を指定）*/
  stroke-dasharray: 3000;/*破線の間隔*/
  stroke-dashoffset: 3000;/*破線の開始位置*/
   animation:JA 5s ease-in-out 2s forwards;
  }

  @keyframes JA{
  0%{stroke-dashoffset:3000;fill: rgba(0,0,255,0) ;}
  80%{stroke-dashoffset:2000;fill:#C00;}
  100%{stroke-dashoffset:0;fill:#C00;}
}
</style>
<body>
<div class="box">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" width="500px"
	 y="0px" viewBox="170.1 -34.6 276 128.6" enable-background="new 170.1 -34.6 276 128.6" xml:space="preserve">
<g>
	<path class="line" d="M215.6-34.6l15,128.6h-23.9l-1.4-28.8h-9.4L194.3,94h-24.2l13.3-128.6H215.6z M204.5,45.3c-1.3-11.7-2.7-29.7-4-51.2
		c-2.7,24.6-4.3,42.6-5,51.2H204.5z"/>
	<path class="line"d="M291.7-34.6l-15,58.1L293.1,94h-24.2l-10.6-55.1V94H235V-34.6h23.3v50l11.7-50H291.7z"/>
	<path class="line"d="M321-34.6V94h-23.3V-34.6H321z"/>
	<path class="line"d="M328.6-34.6h15.7c12.3,0,17.9,0.6,22.2,1.8c4.4,1.2,7.9,4.3,10.7,9.3c2.8,5,4.1,13,4.1,23.9c0,10-1,16.7-2.9,20.2
		c-1.9,3.4-5.8,5.5-11.5,6.2c5.2,1.6,8.7,3.8,10.4,6.6c1.8,2.8,2.9,5.3,3.3,7.6c0.4,2.3,0.7,8.6,0.7,19V94h-21.5V51.3
		c0-6.9-0.4-11.1-1.3-12.8c-0.8-1.6-3.1-2.5-6.7-2.5v58h-23.3V-34.6z M352-12.6V16c2.9,0,5-0.5,6.2-1.5c1.2-1,1.8-4.4,1.8-10v-7.1
		c0-4.1-0.6-6.8-1.7-8C357.1-12,355-12.6,352-12.6z"/>
	<path class="line"d="M431.1-34.6l15,128.6h-23.9l-1.4-28.8h-9.4L409.8,94h-24.2l13.3-128.6H431.1z M420.1,45.3c-1.3-11.7-2.7-29.7-4-51.2
		c-2.7,24.6-4.3,42.6-5,51.2H420.1z"/>
</g>
</svg>

<div class="japanese">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" 
	 y="0px" width="500px""
	  viewBox="0 0 259 146" enable-background="new 0 0 259 146" xml:space="preserve">
<g>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M110,0c5,0,10,0,15,0c0.333,0.667,0.667,1.333,1,2
		c0.667,0,1.333,0,2,0c0,2.667,0,5.333,0,8c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0
		c-0.333,0.667-0.667,1.333-1,2c0.333,0,0.667,0,1,0c0,2.667,0,5.333,0,8c0.334,0,0.666,0,1,0c0,1.333,0,2.667,0,4
		c0.334,0,0.666,0,1,0c0,4,0,8,0,12c0.334,0,0.666,0,1,0c0,1,0,2,0,3c0.334,0,0.666,0,1,0c0.334,1,0.666,2,1,3c3,0,6,0,9,0
		c0.333-0.667,0.667-1.333,1-2c2,0.667,4,1.333,6,2c1.313,5.012,4.551,4.775,5,12c-2.078,1.094-1.771,1.611-5,2c0,0.667,0,1.333,0,2
		c-2.275,0.167-2.635,0.15-4,1c0,0.333,0,0.667,0,1c-1,0-2,0-3,0c0,0.333,0,0.667,0,1c-1.836,1.56-1.909,1.471-2,5
		c3.097,1.643,1.796,1.898,7,2c0,1.333,0,2.667,0,4c2.666,0,5.334,0,8,0c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0
		c0,1.333,0,2.667,0,4c-1,0-2,0-3,0c0,0.666,0,1.334,0,2c-4.602,0.514-5.04,2.931-9,4c-0.438,4.068-1.112,4.48,0,8
		c0,1.333,0,2.667,0,4c0.333,0,0.667,0,1,0c0,0.666,0,1.334,0,2c0.333,0,0.667,0,1,0c0,2,0,4,0,6c0.333,0,0.667,0,1,0
		c0.667,2,1.333,4,2,6c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0
		c0,1.333,0,2.667,0,4c0.333,0,0.667,0,1,0c0,0.667,0,1.333,0,2c0.333,0,0.667,0,1,0c0,2,0,4,0,6c0.333,0,0.667,0,1,0
		c0.333,2,0.667,4,1,6c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0.84,3.631,4.613,7.614,3,10
		c-0.333,1.333-0.667,2.667-1,4c-2.333,0-4.667,0-7,0c0-0.667,0-1.333,0-2c-1,0-2,0-3,0c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0
		c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0c-0.333-1.333-0.667-2.667-1-4c0.333,0,0.667,0,1,0c0.573-2.01-0.12-0.865,1-2
		c1.14,1.139,0.004,0.398,2,1c-0.443-2.477-0.919-3.671-1-7c-0.333,0-0.667,0-1,0c0,0.333,0,0.667,0,1c-0.333,0-0.667,0-1,0
		c0,1,0,2,0,3c-0.667,0-1.333,0-2,0c-0.667-3.333-1.333-6.667-2-10c-0.667,0-1.333,0-2,0c-0.333-1.333-0.667-2.667-1-4
		c-0.667,0-1.333,0-2,0c1.802-5.065-1.796-6.973-3-12c-0.667,0-1.333,0-2,0c-0.385-2.273-4.563-11.301-6-12c-1.333,0-2.667,0-4,0
		c0,0.666,0,1.334,0,2c-1,0-2,0-3,0c0,0.666,0,1.334,0,2c-5.294,0.621-4.653,3.249-10,4c0,0.667,0,1.333,0,2
		c-3.477,0.018-6.883-0.635-9-1c0,0.333,0,0.667,0,1c-0.333,0-0.667,0-1,0c-1.348-0.894,1.215-1.694-1-2c0,0.333,0,0.667,0,1
		c-1.511,0.669-1.649,0.757-4,1c0.333-3.333,0.667-6.667,1-10c0.667,0,1.333,0,2,0c0-0.666,0-1.334,0-2c3.229-0.789,3.449-1.855,8-2
		c0-0.666,0-1.334,0-2c2,0,4,0,6,0c1.439-2.465,3.138-2.787,4-6c0.667,0,1.333,0,2,0c0.465-2.589,0.959-4.424,1-8
		c-4.253-0.817-7.083-1.964-13-2c0-0.667,0-1.333,0-2c-2.333,0-4.667,0-7,0c-0.667-3.333-1.333-6.667-2-10c0.667,0,1.333,0,2,0
		c0.333-1.333,0.667-2.667,1-4c1,0,2,0,3,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0.683-3.305,1.753-3.839,2-8
		c-0.667,0-1.333,0-2,0c0-0.667,0-1.333,0-2c-0.667,0-1.333,0-2,0c0.574-2.01-0.12-0.865,1-2c-0.333-2-0.667-4-1-6
		c-0.333,0-0.667,0-1,0c0-0.667,0-1.333,0-2c-0.333,0-0.667,0-1,0c0-3.333,0-6.667,0-10c-0.333,0-0.667,0-1,0c0-0.667,0-1.333,0-2
		c-0.333,0-0.667,0-1,0c-0.333-1.333-0.667-2.667-1-4c-0.333,0-0.667,0-1,0c0-1.333,0-2.667,0-4c-0.333,0-0.667,0-1,0
		c-0.333-2-0.667-4-1-6c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0C110,1.333,110,0.667,110,0z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M203,18c9.999,0,20.001,0,30,0c0,0.333,0,0.667,0,1
		c1.553,0.864,2.419,0.823,5,1c0.064,3.404-0.611,11.709,2,12c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0
		c0,0.667,0,1.333,0,2c-1.333,0-2.667,0-4,0c0,0.667,0,1.333,0,2c-2.926,0.678-2.425,1.749-3,2c-2,0-4,0-6,0
		c-0.333,0.667-0.667,1.333-1,2c-3.666,0-7.334,0-11,0c0,0.333,0,0.667,0,1c-1.453,0.816-1.703,0.696-4,1
		c0.333-0.667,0.667-1.333,1-2c-1.333,0-2.667,0-4,0c0-0.667,0-1.333,0-2c-3,0-6,0-9,0c0-0.667,0-1.333,0-2
		c-3.215-0.77-2.154-1.508-6-2c0.333-3.333,0.667-6.667,1-10c3.541-0.38,3.036-1.241,6-2c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0
		c-0.333-0.667-0.667-1.333-1-2c1.333,0,2.667,0,4,0C203,19.333,203,18.667,203,18z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M60,26c1.333,0.333,2.667,0.667,4,1c0,0.333,0,0.667,0,1
		c3.667,0,7.333,0,11,0c0,0.667,0,1.333,0,2c1,0,2,0,3,0c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0.667,3.333,1.333,6.667,2,10
		c0.667,0,1.333,0,2,0c0,1.333,0,2.667,0,4c0.667,0,1.333,0,2,0c0.333,2.667,0.667,5.333,1,8c-0.333,0-0.667,0-1,0
		c0,1.333,0,2.667,0,4c-2.739,0.645-2.276,1.309-5,2c0,0.667,0,1.333,0,2c-2.739,0.645-2.276,1.309-5,2c0,0.667,0,1.333,0,2
		c-1,0-2,0-3,0c-0.871,3.428-2.068,2.575-3,6c-0.667,0-1.333,0-2,0c-0.333,2-0.667,4-1,6c-2.739,0.645-2.276,1.309-5,2
		c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0
		c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c0,2,0,4,0,6c-0.333,0-0.667,0-1,0c-0.264,1.668,0.943,1.744,1,2c0,2,0,4,0,6
		c-0.667,0.333-1.333,0.667-2,1c-0.333,1-0.667,2-1,3c-1,0-2,0-3,0c0,0.333,0,0.667,0,1c-1.398,0.872-1.729,0.728-4,1
		c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0
		c-0.333,1.333-0.667,2.667-1,4c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-2,0-4,0-6,0c-0.809,1.314-0.704,1.178-2,2
		c0.333,1.333,0.667,2.667,1,4c-3.541,0.38-3.036,1.24-6,2c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c-0.333,2-0.667,4-1,6
		c-4.336-0.488-2.641-1.423-7-2c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0.333-2,0.667-4,1-6c-0.667,0-1.333,0-2,0c-0.333-2-0.667-4-1-6
		c0.333,0,0.667,0,1,0c0.333-2,0.667-4,1-6c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2
		c7.546-0.133,4.799-2.522,10-4c0-0.667,0-1.333,0-2c1,0,2,0,3,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0.333-1.333,0.667-2.667,1-4c0.333,0,0.667,0,1,0c0-2,0-4,0-6c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0
		c0-1.333,0-2.667,0-4c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0c0-1,0-2,0-3c0.333,0,0.667,0,1,0
		c0.333-3,0.667-6,1-9c0.333,0,0.667,0,1,0c0-0.666,0-1.334,0-2c0.333,0,0.667,0,1,0c0-0.667,0-1.333,0-2c0.333,0,0.667,0,1,0
		c1.863-3.511,2.77-6.93,3-12c4.162-0.147,4.722-1.258,8-2c0,0.667,0,1.333,0,2c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c2.667,0,5.333,0,8,0c0.944-1.801,1.385-1.575,2-4c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0.333-2,0.667-4,1-6c-3,0-6,0-9,0c0,0.667,0,1.333,0,2c-2,0-4,0-6,0c0,0.667,0,1.333,0,2
		c-2,0-4,0-6,0c0,0.333,0,0.667,0,1c-0.667,0-1.333,0-2,0c0,0.333,0,0.667,0,1c-2.375,0.883-5.131-0.333-7,1c-0.333,1-0.667,2-1,3
		c-1.714,2.126-4.118,1.885-8,2c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-2.333,0-4.667,0-7,0
		c0-0.667,0-1.333,0-2c-4.164-0.496-4.688-1.89-10-2c0-0.667,0-1.333,0-2c-1.333,0-2.667,0-4,0c0-0.667,0-1.333,0-2c-1,0-2,0-3,0
		c0-1.333,0-2.667,0-4c-0.667,0-1.333,0-2,0c0-1.333,0-2.667,0-4c1.333,0,2.667,0,4,0c0.333-2,0.667-4,1-6c0.667,0,1.333,0,2,0
		c0-0.667,0-1.333,0-2c0.667,0,1.333,0,2,0c0-0.667,0-1.333,0-2c1,0,2,0,3,0c0.94-4.074,2.933-4.166,8-4c0,0.667,0,1.333,0,2
		c2-0.333,4-0.667,6-1c0-0.333,0-0.667,0-1c2.667,0,5.333,0,8,0c0.333-0.667,0.667-1.333,1-2c0.667,0,1.333,0,2,0
		c0.333-0.667,0.667-1.333,1-2c6,0,12,0,18,0c0-0.667,0-1.333,0-2c1.333,0,2.667,0,4,0C60,27.333,60,26.667,60,26z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M44,28c0.667,0,1.333,0,2,0c0,0.333,0,0.667,0,1
		C43.99,28.426,45.135,29.12,44,28z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M258,42c0.333,2.667,0.667,5.333,1,8
		c-0.678,2.492-2.369,5.184-3,8c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-5.1,0.255-3.494,1.393-8,2c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-2.927,0.684-3.274,1.113-4,4c-3.858,1.006-3.142,2.93-7,4c0,0.666,0,1.334,0,2
		c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c-0.684,2.927-1.113,3.274-4,4c-0.931,3.636-3.08,4.053-4,8
		c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-0.667,0-1.333,0-2,0c-0.684,2.927-1.113,3.274-4,4c0,0.666,0,1.334,0,2c-2,0-4,0-6,0
		c-0.333,0.666-0.667,1.334-1,2c-1,0-2,0-3,0c0,0.334,0,0.666,0,1c-1.417,0.873-1.731,0.681-4,1c0,0.667,0,1.333,0,2
		c-1.333,0-2.667,0-4,0c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0c0,0.667,0,1.333,0,2c-0.667,0-1.333,0-2,0c-0.746,3.248-2.785,5.214-6,6c-0.789-3.229-1.855-3.449-2-8
		c1.333,0,2.667,0,4,0c0.944-1.801,1.385-1.574,2-4c3.843,0.602,2.749,0.353,7,0c0.77-3.215,1.508-2.154,2-6c1.666,0,3.334,0,5,0
		c0-0.334,0-0.666,0-1c-0.333,0-0.667,0-1,0c0.333-1,0.667-2,1-3c0.667,0,1.333,0,2,0c0-0.666,0-1.334,0-2c0.667,0,1.333,0,2,0
		c0.963-6.92,1.668-8.33,10-8c0-0.666,0-1.334,0-2c3.541-0.38,3.036-1.24,6-2c0.594-3.715,0.58-2.289,0-6c-2,0-4,0-6,0
		c-0.944,1.801-1.385,1.574-2,4c-0.667,0-1.333,0-2,0c0,0.666,0,1.334,0,2c-3,0-6,0-9,0c-0.333-0.666-0.667-1.334-1-2
		c-1.333,0-2.667,0-4,0c0-0.334,0-0.666,0-1c-1-0.334-2-0.666-3-1c-0.333-0.666-0.667-1.334-1-2c-1.666,0-3.334,0-5,0
		c-0.333-0.666-0.667-1.334-1-2c-0.667,0-1.333,0-2,0c-1.354-5.211-2.194-3.563-1-10c0.667,0,1.333,0,2,0
		c0.77-3.215,1.508-2.155,2-6c3,0,6,0,9,0c0-0.667,0-1.333,0-2c3.666,0,7.334,0,11,0c1.928-3.209,1.687-0.445,4-2
		c0-0.333,0-0.667,0-1c-0.333,0-0.667,0-1,0c0-0.333,0-0.667,0-1c1.333,0,2.667,0,4,0c0-0.667,0-1.333,0-2c1-0.333,2-0.667,3-1
		c0-0.333,0-0.667,0-1c0.667,0,1.333,0,2,0c0.333-0.667,0.667-1.333,1-2c1,0,2,0,3,0c0.333-0.667,0.667-1.333,1-2
		c1.666,0,3.334,0,5,0c0.333-0.667,0.667-1.333,1-2c5.333,0,10.667,0,16,0c0-0.333,0-0.667,0-1c0.333,0,0.667,0,1,0
		c0,0.333,0,0.667,0,1c0.667-0.333,1.333-0.667,2-1c0,0.333,0,0.667,0,1C250.666,42,254.334,42,258,42z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M173,60c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0C173,61.333,173,60.667,173,60z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M166,64c0.667,0,1.333,0,2,0c0,0.667,0,1.333,0,2
		c-0.667,0-1.333,0-2,0C166,65.333,166,64.667,166,64z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M175,66c-0.333,1.333-0.667,2.667-1,4c-1,0-2,0-3,0
		c0,0.667,0,1.333,0,2c-1.666,0.333-3.334,0.667-5,1c0-0.333,0-0.667,0-1c-1.139-1.139-0.398-0.003-1-2c0.974-0.52,1.772-1.875,2-2
		c1,0,2,0,3,0c0-0.333,0-0.667,0-1C171.506,66.078,172.446,66.154,175,66z"/>
	<path class="red" fill-rule="evenodd" clip-rule="evenodd" fill="#E60012" d="M160,68c0,0.667,0,1.333,0,2c-1,0-2,0-3,0c0-0.333,0-0.667,0-1
		c0.333,0,0.667,0,1,0C159.14,67.861,158.004,68.602,160,68z"/>
</g>
</svg>
</div><!--/japanese/-->
</div><!--/box/-->

</body>
</html>

参考サイト
SVGのアニメーションで線を引く方法まとめ（IEへの対応も）｜2.IDEA