Vue.JS v-for内でSVGが表示されない

SVG初心者です。

配列データをつかって、SVGで円を描き、その下に文字を表示させたいと思い、
以下のように書きましたが、v-for内にSVGを置くとSVG自体の表示がなされなくなります。

Vue.js
1<template>
2  <div>
3    <section class="eventview">
4      <svg width="800" height="800">
5        <div v-for="n in [10,20,30]" :key="n">
6          <circle :cx="n*10" :cy="30" r="10"/>
7          <text    :x="n*10" :y="50" >｛｛ n ｝｝</text>
8        </div>
9      </svg>
10    </section>
11  </div>
12</template>

試してみたこと

以下のようにSVG要素をv-forの外に出しますと、表示が出来ました。
ただ、同じ配列データを２度使わなくてはなりません。このようにするしかないのでしょうか？

Vue.js
1<template>
2  <div>
3    <section class="eventview">
4      <svg width="800" height="800">
5        <circle v-for="n in [10,20,30]" :key="n"　:cx="n*10" :cy="30" r="10"/>
6        <text v-for="n in [10,20,30]" :key="n" :x="n*10" :y="50" >｛｛ n ｝｝</text>
7      </svg>
8    </section>
9  </div>
10</template>

なにか他にやり方があるのでしょうか？
アドヴァイスいただけますと幸いです。何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

vue
1<template>
2  <div>
3    <section class="eventview">
4      <svg width="800" height="800">
5        <template v-for="n in [10,20,30]">
6          <circle :cx="n*10" :cy="30" r="10" :key="n"/>
7          <text    :x="n*10" :y="50" :key="n">{{ n }}</text>
8        </template>
9      </svg>
10    </section>
11  </div>
12</template>