SVG Attributes + Vue

Using Vue.js to adjust properties on an SVG element.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>SVG Attributes</title>
    <style type="text/css" media="screen">
        body {
            font-family: "Courier New", Georgia;
            background: #f4f4f4;
        }
        h1 {
            font-size: 3em;
            padding: 0px;
            font-weight: normal;
            text-align: center;
            text-transform: uppercase;
        }

.lede {
            font-style: italic;
            font-weight: 400;
            font-size: .9em;
            font-size: 14px;
            line-height: 1.4em;
            text-align: center;
        }
        label {
            display: inline-block;
            margin-left: 10px;
            width: 200px;
        }

input {
            margin-top: 5px;
            position: absolute;
            left: 200px;
            width: 180px !important;
        }

.control {
            height: 30px;
        }
    </style>
</head>

<body>

<script type="text/x-template" id="svg-circle">
        <circle 
            :r="properties.r"
            :cx="properties.cx"
            :cy="properties.cy"
            :stroke="properties.stroke"
            :fill="properties.fill"
            :stroke-width="properties.strokeWidth"
            :opacity="properties.opacity"
            :stroke-opacity="properties.strokeOpacity"
            :fill-opacity="properties.fillOpacity"
            :stroke-dasharray="properties.strokeDasharray"
        ></circle>
    </script>

<div id="chart">
        <h1 class="g-header centered">SVG Attributes</h1>
        <p class="lede centered" style="margin-bottom:0rem">Adjusting SVG attributes using Vue.js</p>
        <svg width="500" height="300">
            <svg-circle :attributes="attributes"></svg-circle>
        </svg>
        <div v-for="attribute in attributes">
            <div class="control" v-if="attribute.min !== undefined">
                <label>{{ attribute.label }}</label>
                <input type="range" v-model="attribute.value" :min="attribute.min" :max="attribute.max"
                    :step="attribute.step">
            </div>
        </div>
    </div>

</body>

</html>

https://unpkg.com/vue