2 flat logo on transparent 256
2018-08-08

Vue.jsでSVGのアイコンを操作する|コピペで動くサンプル付き

Vie083112

今回はSVGで作成したアイコンをクリックすると Vue.JSで背景を変更する動作を実現します。

JavaScriptでも実現可能ですが、Vueはフレームワークの為 コードの可読性が向上します。

SVGとは

SVGはxml形式で保存できる画像形式の1つです。 xml形式なので、JavaScriptで色や大きさの操作を行うことが可能なので、グラフィカルな動作やグラデーションの変更などを リアルタイムで行うことが可能です。

ファイルの保存形式は.svgとなります。

今回利用したアイコン

SVGを利用する場合は Method Draw を利用しました。

こちらのサイトはパワーポイントのように描画でき、 保存するとそのままSVGとして展開できます。

今回はこのサイトから以下アイコンをダウンロードして利用します。

SVG保存

サンプルコード

以下の内容をメモ帳などに貼り付け、html形式で保存して展開すると表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テストSVG</title>
    <!--JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>

<body>
<div id="test-svg">
    <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
            <title>Layer 1</title>
            <path id="svg_1"
                  d="m345.303767,250.264941c-9.507848,-3.395416 -13.304268,-12.727187 -13.304268,-12.727187s-4.283571,2.113702 -4.283571,-3.822653s4.283571,3.822653 8.567143,-19.098276c0,0 11.876411,-2.975673 9.507848,-27.583068l-2.855714,0c0,0 7.130886,-26.30885 0,-35.220879c-7.139285,-8.912029 -9.986601,-14.848385 -25.684629,-19.098276s-9.978201,-3.402911 -21.392659,-2.968178c-11.414458,0.427238 -20.930705,5.936356 -20.930705,8.904534c0,0 -7.130886,0.427238 -9.978201,2.975673c-2.855714,2.548436 -7.609638,14.421147 -7.609638,17.396821s2.376962,22.920929 4.753924,27.163325l-2.830517,0.84698c-2.376962,24.607394 9.507848,27.583068 9.507848,27.583068c4.275172,22.920929 8.558743,13.16192 8.558743,19.098276s-4.283571,3.822653 -4.283571,3.822653s-3.79642,9.331771 -13.304268,12.727187c-9.507848,3.38792 -62.288166,21.631721 -66.580136,25.454374c-4.29197,3.830149 -3.804819,21.646712 -3.804819,21.646712l226.332148,0c0,0 0.49555,-17.816563 -3.79642,-21.646712c-4.30037,-3.822653 -57.080687,-22.066454 -66.588536,-25.454374zm-104.737517,-1.289209c-0.831517,-1.349172 -1.243076,-2.323574 -1.243076,-2.323574s-3.628437,1.7914 -3.628437,-3.238012s3.628437,3.238012 7.256874,-16.182566c0,0 10.070592,-2.518454 8.054794,-23.378149l-2.418958,0c0,0 1.20108,-4.429781 1.990601,-9.998862c-0.033597,-2.308583 0.050395,-4.767074 0.310769,-7.465417l0.319168,-3.19304c-0.176382,-3.687736 -0.89871,-7.038179 -2.620538,-9.189359c-6.047395,-7.547867 -8.466353,-12.584775 -21.762222,-16.182566c-13.295869,-3.597791 -8.466353,-2.885729 -18.133785,-2.518454c-9.675832,0.359779 -17.739025,5.029413 -17.739025,7.555362c0,0 -6.047395,0.359779 -8.466353,2.518454c-2.276172,2.031253 -5.921407,10.958273 -6.358164,14.128827l0,2.106207c0.39476,4.894495 2.166983,18.356232 3.939206,21.526785l-2.40216,0.719558c-2.007399,20.859695 8.054794,23.378149 8.054794,23.378149c3.628437,19.420578 7.256874,11.153153 7.256874,16.182566s-3.628437,3.238012 -3.628437,3.238012s-3.216878,7.922637 -11.280071,10.785879c-0.512349,0.17989 -1.167483,0.419742 -1.948605,0.689577l0,39.230917l4.829517,0c-0.243576,-9.57912 0.646735,-21.939032 6.265773,-26.938463c2.990101,-2.660867 12.79192,-7.038179 53.35146,-21.451831zm187.553229,-67.878331c-0.335966,-2.833261 -1.066693,-5.35921 -2.452555,-7.090647c-6.038996,-7.555362 -8.466353,-12.584775 -21.753823,-16.182566c-13.304268,-3.597791 -8.466353,-2.885729 -18.142184,-2.518454c-9.667432,0.359779 -17.730625,5.029413 -17.730625,7.555362c0,0 -6.038996,0.359779 -8.466353,2.518454c-2.276172,2.038748 -5.955004,11.033227 -6.366563,14.173799l0.277172,0l0.671933,6.843299c0.167983,1.731437 0.184782,3.267994 0.226777,4.834532c0.755924,4.991936 1.763823,10.118788 2.771723,11.910189l-2.40216,0.719558c-2.007399,20.859695 8.063193,23.378149 8.063193,23.378149c3.628437,19.420578 7.248475,11.153153 7.248475,16.182566s-3.628437,3.238012 -3.628437,3.238012s-0.445155,1.064347 -1.369063,2.533445c40.06399,14.241258 49.781818,18.588589 52.738322,21.24196c5.627437,4.999431 6.509349,17.351848 6.265773,26.938463l4.031597,0l0,-39.770586c-0.134387,-0.044972 -0.319168,-0.112431 -0.436756,-0.157403c-8.054794,-2.870738 -11.280071,-10.785879 -11.280071,-10.785879s-3.636836,1.7914 -3.636836,-3.238012s3.636836,3.238012 7.256874,-16.182566c0,0 6.752924,-1.716446 8.08839,-13.799029l0,-9.196854c-0.008399,-0.134917 -0.008399,-0.247348 -0.025197,-0.382265l-2.427357,0c0,0 1.805819,-6.670905 2.452555,-13.948937l0,-8.814589l0.025197,0z"
                  v-on:click="active = !active" v-bind:class="{'active': active}">
        </g>
    </svg>
</div>
</body>
<script>
    new Vue({
        el: "#test-svg",
        data: {
            active: false
        }
    })
</script>
<style>
    path {
        fill: #333;
        transition: all 0.4s cubic-bezier(.96, .04, .04, .96);
        stroke: black;
    }

    .active {
        fill: white;
        stroke: green;
        stroke-width: 10px;
    }
</style>
</html>

コード解説

以下コードでVue.jsでクリックした場合に、activeクラスの活性化・非活性化を動作させます。

  v-on:click="active = !active" v-bind:class="{'active': active}"

以下CSSのpathはデフォルトでSVGアイコンに適用されるスタイルシートです。

<style>
    path {
        fill: #333;
        transition: all 0.4s cubic-bezier(.96, .04, .04, .96);
        stroke: black;
    }

    .active {
        fill: white;
        stroke: green;
        stroke-width: 10px;
    }
</style>

activeはクリックした際の色を指定しています。

fillは要素の内側の色を指定できます。 今回ですとクリックした場合にSVGの内側が白くなっています。

strokeは枠線の色の設定で、stroke-widthは枠線の太さを指定します。

以上になります。

その他関連記事

CSS3でhoverした時に背景をふわっと変更する|コピペで動くサンプル付き

Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Ruby On RailsでSassを活用し、CSS作成を高速・効率化する

現役デザイナーが教える! デザインを勉強する上で参考になりそうなサイトとその理由

前の記事
次の記事