Utilizing inline svgs, I have a svg circle filled with a pattern that should cover 100% of the container size. However, when the parent element is resized via JavaScript, the pattern no longer reflects the 100% width and height as expected. This issue seems to only occur in browsers other than Firefox.
It appears that the CSS does not update properly when the parent element's dimensions change. Interestingly, manually adjusting the value to 99% prompts Chrome to update the size correctly on both dimensions.
The structure of my SVG is as follows:
<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>
I have come across similar questions, but unfortunately without a solution:
Image inside svg pattern is blurried after zoom in Chrome (involving blurry images)
SVG <pattern> won't load when generated by Javascript (the question was closed without a satisfactory answer)