smellman's Broken Diary

クソみたいなもんです

SVGでなんか書いた。


すいません、まだ三話までしか見てないんです><
ソースはこんなん。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     height="300" width="540" style="background-color: white;">

  <defs>
    <g id="eye">
      <circle stroke="black" fill="rgb(171, 98, 122)" r="60" cx="90" cy="90" />
      <circle strike="black" fill="rgb(108, 28, 57)" r="30" cx="90" cy="90" />
      <circle fill="rgb(220, 171, 187)" r="15" cx="120" cy="75" />
    </g>
  </defs>
  <g transform="translate(0,0)">
    <use xlink:href="#eye"/>
  </g>
  <g transform="translate(350,0)">
    <use xlink:href="#eye"/>
  </g>
  <g transform="translate(180,250)">
    <path stroke="black" fill="none"
	  d="m 0,0 c 25,32 42,34 85,17 25,19 61,22 88,-20" />
  </g>
</svg>

今回作った目的はuse xlinkベジェ曲線のいいサンプルはないかなーっていうので作ってみました。
見てわかるように目の部分は同じ物を配置するようになっています。
口の部分は画像を見ながら一度Inkspaceで作って、一旦先頭の座標を0,0にしたあとにscaleでどのぐらい縮めればいいかを測って、それから全座標をscaleで調べた分だけ割っているって感じになります。さすがにベジェ曲線を手書きはきっついw
今回困ったのはemacsSVGを画像として表示してしまうところ。最初Inkspaceで作ったファイルを普通にemacsで開いたんですが、画像モードがちゃんと動かなかったらしく、emacsが落ちましたw なお、emacs で画像モードから編集モードに移動するには C-c C-c でいけるっていうのも今回学びました。
で、作ったあとに XAML で作ってるケースがあるのを思い出して、めっちゃ後悔していたりしました。かぶってるやんwww