inkscapeで画像を作って、jsで操作してみた。 #JavaScript

はじめに

「webサイト上で画像を動かせるようになりたい！」
この記事を読むことで上記の望みを達成できるかと思います。
事前にinkscapeをPCにインストールしてください。インストール方法については他の記事を参照してください。

inkscapeで画像を作成

inkscapeで適当なSVG画像を作成して下さい。
今回は、以下のSVGを作成しました。

プログラム

inkspaceでSVGファイルを作成したら、htmlとjavascriptで画像を操作するプログラムを作成します。

ファイル構造↓

index.html

<!DOCTYPE html>
<html lang="en">
</summury>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <object data="./sample.svg" type="image/svg+xml" id="i1" width="400" height="400" style="display: block ;margin-right: auto; margin-left:auto;"></object>
    <button id="change_btn" style="margin-right: 50%; display: block; margin: auto;">画像が変化するよ</button>

    <script>
        let change_image = () => {
            var svgDoc = document.getElementById("i1").getSVGDocument();
            var svgtext = svgDoc.getElementById("text12");

            console.log(svgDoc);
            console.log(svgtext);
            console.log(svgtext.getAttribute("style"));
            svgtext.setAttribute("style",
            "font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect14);fill:#aa8800;fill-opacity:1;stroke:red;storoke-width:2;");
            svgDoc.getElementById("path10").setAttribute("style",
            "fill:#0000FF;fill-rule:evenodd;stroke-width:0.5");
            svgDoc.getElementById("where").setAttribute("y","-110");
        }
        document.getElementById('change_btn').addEventListener("click", change_image);

    </script>
</body>

</html>

sample.svgのコード

sample.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8"
   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   sodipodi:docname="test_svgs_ample.svg">
  <defs
     id="defs2">
    <rect
       x="-313.72024"
       y="-142.11905"
       width="3.0238095"
       height="18.89881"
       id="rect20" />
    <rect
       x="-452.05952"
       y="-117.17262"
       width="123.97619"
       height="58.964286"
       id="rect14" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="400"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:document-rotation="0"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1000"
     inkscape:window-x="-11"
     inkscape:window-y="1609"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="レイヤー 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:#1a1a1a;fill-rule:evenodd;stroke-width:0.264583"
       id="path10"
       cx="105.45538"
       cy="135.69345"
       r="105.45536" />
    <text
       xml:space="preserve"
       id="text12"
       style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect14);fill:#aa8800;fill-opacity:1;stroke:none;"
       transform="matrix(5.2048978,0,0,6.3519335,2395.0129,831.63321)"><tspan 
         id="where"
         x="-452.05859"
         y="-107.51641"><tspan
           style="fill:#aa8800">hello</tspan></tspan></text>
    <text
       xml:space="preserve"
       id="text18"
       style="fill:black;fill-opacity:1;line-height:1.25;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:10.58333333px;white-space:pre;shape-inside:url(#rect20);" />
  </g>
</svg>

imgタグ、CSSタグでSVGを表示すると画像を操作できない。

SVGを操作できる形で表示するには2つの方法がある。

1つ目は、SVGタグを使う方法だ。

SVGタグ内に必要なSVGファイルの中身を記述する方法だ。詳しくは「https://tiltilmitil.co.jp/blog/1494」などを参照していただきたい。

2つ目は、今回用いている手法だ。

外部のSVGファイルをobjectタグで読み込む方法だ。
<object>タグは外部からファイルを読み込むためのタグである。

<object data="./sample.svg" type="image/svg+xml" id="i1" width="400" 
height="400" style="display: block ;margin-right: auto; 
margin-left:auto;"></object>

上記のようにtype属性にtype="image/svg+xml"を指定する。

SVGのファイルを操作する。

SVGを操作しているJavaScriptの部分を以下に記載する。


 let change_image = () => {
            var svgDoc = document.getElementById("i1").getSVGDocument();
            var svgtext = svgDoc.getElementById("text12");

            console.log(svgDoc);
            console.log(svgtext);
            console.log(svgtext.getAttribute("style"));
            svgtext.setAttribute("style",
            "font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;shape-inside:url(#rect14);fill:#aa8800;fill-opacity:1;stroke:red;storoke-width:2;");
            svgDoc.getElementById("path10").setAttribute("style",
            "fill:#0000FF;fill-rule:evenodd;stroke-width:0.5");
            svgDoc.getElementById("where").setAttribute("y","-110");
        }

ポイントは1行目。
getelementbyId()で指定して取り出した後に、getSVGDocument()をすることで、SVGファイルの中身を取り出すことができる。

取り出した要素について、style属性などを指定して、値を変更していくことで、画像の操作が可能になる。

SVG操作の様子

ボタンを押す前の状態↓

ボタンを押し、SVGを操作した後の状態↓