Javascript SVG模式元素在Chrome中不会调整大小

我使用的是内联SVG。我有一个svg圆圈，并用一个模式填充它。内部图像需要为容器大小的100%。在调整父元素的大小之前，此操作一直有效

当父元素（div）通过js调整大小时，模式将不再反映100%的宽度和高度。 不过，这在Firefox中是可行的

在我看来，css似乎没有得到更新。如果我将该值更改为99%，Chrome会手动更新两个维度的大小

这是我的svg的结构：

<div style="height:150px; width:150px;">
  <svg style="height:100%; width:100%;">
    <defs>
       <pattern id="image" x="0%" y="0%" width="100%" height="100%">
         <image x="0%" y="0%" width="58%" height="58%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="image.jpg"></image>
       </pattern>
    </defs>
    <circle cx="50%" cy="50%" r="29%" fill="url(#image)">
    </circle>

    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#other"></use>
  </svg>
<div>

我发现了类似的问题，但没有得到帮助：

（在那里，图像变得模糊）

---

（问题结束时没有给出正确答案）

您需要在svg中添加viewBox属性，请参阅以下链接：

更新代码-

function inc（）{
var parent=document.getElementById（'parent'）；
parent.style.width='350px'；
parent.style.height='350px'；
}

你能粘贴完整的代码吗，我是说js，你是如何调整parentreport Chrome在@Ayushharma上的bug大小的：我更新了这个问题，所以它也显示了外部div。此div更改为，但内部样式不会更新。@RobertLongson我不确定这是否是一个bug？对我来说似乎是这样，但我可能会做错什么？这对100%有效吗？我试过了，它似乎起了作用，但同样的问题也出现了（圆圈大小没有更新）。我想我应该将viewBox设置为与div相同的值？（这样，圆圈的大小应始终正确，并在值更改后更新。）该方法有什么问题吗？@Blue根据我的理解，我们不能为viewBox属性提供%值，您可以参考下面的链接以获得有关viewBox的更多了解-