I would like to use SVG images as background images of html div elements. SVG must be stretched according to the section in which it is embedded. This works well in Google Chrome, but in Firefox SVG adheres to its width-height ratio when resized and does not stretch. I use preserverAspectRatio = "none".
SVG looks like this:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1" preserveAspectRatio="none" viewBox="0 0 180 95">
<g
id="layer1">
<path
d="m 1.0714286,31.469326 140.0000014,0 0,-30.0000009 30,40.0000009 -30,40 0,-30 -140.0000014,0 z"
id="path3015"
style="fill:#4f81bd; fill-opacity:1; stroke:#385d8a; stroke-width:3; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1" />
</g>
</svg>
HTML looks like this:
<div style="
width: 250px;
height: 200px;
background-image:url(file.svg);
background-repeat:no-repeat;">
test
</div>
In Chrome, I can change the width / height of the div element and the SVG image is stretched without worrying about the original width / height ratio. This behavior is intended. In Firefox, it just changes and keeps the original ratio. Do you know how I can change this? Thanks
source
share