Vue dynamic svg generation

by Rocka

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<div class="container">
  <svg class="overlay" :view-box.camel="`0 0 ${width} ${height}`">
    <template v-for="shape of shapes">
      <component :is="shape.type" v-bind="shape" v-text="shape.text"></component>
    </template>
  </svg>
</div>

CSS

.container {
  width: 300px;
  height: 200px;
  background: tan;
}

.overlay {
  width: 100%;
  height: 100%;
}

JavaScript

var demo = new Vue({
  el: '.container',
  data: {
    width: 100,
    height: 100,
    shapes: [{
        type: 'rect',
        x: 0,
        y: 0,
        width: 100,
        height: 100,
        fill: 'none',
        stroke: 'black'
      },
      {
        type: 'path',
        d: 'M50 45l0 10M45 50l10 0',
        stroke: 'black'
      },
      {
      	type: 'text',
        x: 50,
        y: 50,
        text: '50, 50',
        'alignment-baseline': 'hanging'
      }
    ]
  }
});