javascript - SVG 图案元素不会在 Chrome 中调整大小

Question

我正在使用内联 svg。我有一个 svg 圆圈并用一个图案填充它。里面的图像需要 100% 的容器大小。这一直有效，直到调整父元素的大小为止。

当父元素 (div) 通过 js 调整大小时，模式将不再反射(reflect) 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>

我发现了类似的问题，但没有帮助:

Image inside svg pattern is blurried after zoom in Chrome (图像变得模糊)

SVG <pattern> won't load when generated by Javascript (问题没有很好的回答就结束了)

Answer 1

您需要在svg中添加viewBox属性，请引用以下链接:<强> https://css-tricks.com/scale-svg/

更新代码 -

function inc(){
var parent = document.getElementById('parent');
parent.style.width = '350px';
parent.style.height = '350px';

}

<div id='parent' style="height:150px; width:150px;">
  <svg style="height:100%; width:100%;" viewBox="0 0 50 50">
    <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>

<a href="#" onclick="inc()">Increase</a>