Question

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

当通过js调整父元素（div）的大小时，模式将不再反映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>

SVG Pattern元素不会在Chrome中调整大小

1 个答案: