Vue：从模板渲染时，SVG元素不会在内部缩放

Question

因此，在Vue.js之外，我可以使用以下技巧来确保我的SVG缩放比例适合其内部的div：

• 在父viewbox元素上声明一个svg属性
• 省略父height元素上的svg属性
• 在父width元素上将100%属性设置为svg

然后，当div调整大小时，SVG随之缩放。

但是在Vue.js内部中，当我做完全相同的事情时，但是在Vue渲染的组件内部，它保持恒定的静态大小（由{{1}以像素为单位定义） }尺寸。

但是，我可以通过强制DOM重新评估/重新渲染调用此代码的SVG来克服此障碍：

viewbox

这似乎非常骇人听闻，尤其是对于生产代码而言。因此，有什么方法可以使Vue渲染的SVG也能够填充其父div容器的大小吗？

SSCCE 1：在Vue.js外部（SVG缩放有效）

parentSvgDiv.innerHTML = parentSvgDiv.innerHTML;

var d = document.querySelector('.my-div');
var i, t;

function grow() {
  if (d.style.width === '100px') {
    t = 0;
    i = setInterval(function() {
      if (t >= 20) {
        clearInterval(i);
      }
      d.style.width = (100 + t++ * 20) + 'px';
    }, 50);
  }
}

function shrink() {
  if (d.style.width === '500px') {
    t = 20;
    i = setInterval(function() {
      if (t <= 0) {
        clearInterval(i);
      }
      d.style.width = (100 + t-- * 20) + 'px';
    }, 50);
  }
}

SSCCE 2：在Vue.js内部（SVG缩放不起作用）

<button onclick="grow()">Grow</button>
<button onclick="shrink()">Shrink</button>
<div class="my-div" style="height: 500px; width: 100px;">
  <svg width="100%" viewbox="0 0 100 100">
    <polygon stroke-width="3" stroke="#000000" fill="none" points="50,0 62,38 100,50 62,62 50,100 38,62 0,50 38,38"></polygon>
  </svg>
</div>

Vue.component('star-svg', {
  template: `
    <div class="my-div" style="height: 500px; width: 100px;">
      <svg width="100%" viewbox="0 0 100 100" >
        <polygon stroke-width="3" stroke="#000000" fill="none" points="50,0 62,38 100,50 62,62 50,100 38,62 0,50 38,38"></polygon>
      </svg>
    </div>		
  `
});

var app = new Vue({
  el: '#app',
  data: {}
});

var d = document.querySelector('.my-div');
var i, t;

function grow() {
  if (d.style.width === '100px') {
    t = 0;
    i = setInterval(function() {
      if (t >= 20) {
        clearInterval(i);
      }
      d.style.width = (100 + t++ * 20) + 'px';
    }, 50);
  }
}

function shrink() {
  if (d.style.width === '500px') {
    t = 20;
    i = setInterval(function() {
      if (t <= 0) {
        clearInterval(i);
      }
      d.style.width = (100 + t-- * 20) + 'px';
    }, 50);
  }
}

function fix() {
  d.innerHTML = d.innerHTML;
}