Not that it matters but I'm using https://getwaves.io/ to generate an SVG image.
What should happen
The blue waves should take up much more vertical space in the gray box. It seems like it does not use object-fit: cover.
In fact, it should follow the size of the box, like a bounding box.
What I've tried to far
Set height and width to 100%
Set object-fit to cover
Made sure there is a viewbox
Made sure there are no other width and height
Example
It shows that an JPG image works fine but not the SVG image.
Question
How can I fix it?
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
object-fit: cover;
height: 100%;
width: 100%;
}
Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#0369a1" fill-opacity="1" d="M0,224L80,240C160,256,320,288,480,277.3C640,267,800,213,960,208C1120,203,1280,245,1360,266.7L1440,288L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>
First of all you can use the attribute preserveAspectRatio="none" on <svg>. This will stretch the SVG if you specify a height and a width.
Second you path was placed around 200 down the y axis. So, when it stretched, the transparent area above the path would also take up more space. I moved the path so that it almost hits y=0 on the top. Now the path only takes up 113 in the height and when stretched it will fill up the entire box.
I used SvgPathEditor to edit the path.
.wrap {
height: 300px;
width: 300px;
background: #eee;
}
svg, img {
height: 100%;
width: 100%;
}
Just the SVG file
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
SVG in a box - Does not work
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 113" preserveAspectRatio="none">
<path fill="#0369a1" fill-opacity="1" d="M 0 17 L 80 33 C 160 49 320 81 480 70.3 C 640 60 800 6 960 1 C 1120 -4 1280 38 1360 59.7 L 1440 81 L 1440 113 L 1360 113 C 1280 113 1120 113 960 113 C 800 113 640 113 480 113 C 320 113 160 113 80 113 L 0 113 Z"></path>
</svg>
</div>
JPG in a box - Do work
<div class="wrap">
<img src="https://placekitten.com/96/139">
</div>
Currently I have an SVG component that has a border and inside the border there is an image. I am using these SVGs as markers on my map component so that when the user hovers over the particular marker, an event happens. With my current SVG this event only occurs when I hover over the border of the SVG and not the image. So is there anyway I can make the whole path of the SVG along with the image as 1 single entity.
CodeSandbox for better reference: https://codesandbox.io/s/full-popup-mapbox-stackoverflow-forked-gh75l
My SVG:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
<clipPath id="clip">
<path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
-284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
</clipPath>
<image x="-200" y="30" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
<use xlink:href="#path" fill="none" stroke="gold" stroke-width="30" />
</svg>
Change onMouseEnter to onMouseOver and then the popup will stay as your cursor moves around the image.
onMouseOver={() => {
setSelectedProperty(item);
setIsPopupShown(true);
}}
I am using a couple of icons from https://leungwensen.github.io/svg-icon–which is a great resource–in a web app.
I can display and style them utilizing the use statement where I put the "sprite-sheet" in the top of the file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="width:0;height:0;position:absolute;overflow:hidden;">
<defs>
<symbol viewBox="0 0 1024 1024" aria-labelledby="bisi-ant-check-circle-o-title" id="si-ant-check-circle-o"><title id="bisi-ant-check-circle-o-title">icon check-circle-o</title><path d="M821 331q-9-9-22.5-9t-22.5 9L383 713 247 584q-9-10-22.5-10T202 584q-10 9-10 22.5t10 22.5l158 152q10 9 23 9t23-9l415-405q10-9 10-22.5T821 331zM512 64q91 0 174 36 80 33 142 96 63 62 96 142 36 83 36 174t-36 174q-33 80-96 142-62 63-142 96-83 36-174 36t-174-36q-80-33-143-96-61-61-95-142-36-83-36-174t36-174q33-80 96-142 62-63 142-96 83-36 174-36zm0-64Q408 0 313 41T150 150 41 313 0 512t41 199 109 163 163 109 199 41 199-41 163-109 109-163 41-199-41-199-109-163T711 41 512 0z"/></symbol>
<symbol viewBox="0 0 1024 1024" aria-labelledby="dnsi-ant-frown-title" id="si-ant-frown"><title id="dnsi-ant-frown-title">icon frown</title><path d="M512 64q91 0 174 35 81 34 143 96t96 143q35 83 35 174t-35 174q-34 81-96 143t-143 96q-83 35-174 35t-174-35q-81-34-143-96T99 686q-35-83-35-174t35-174q34-81 96-143t143-96q83-35 174-35zm0-64Q373 0 255 68.5T68.5 255 0 512t68.5 257T255 955.5t257 68.5 257-68.5T955.5 769t68.5-257-68.5-257T769 68.5 512 0zM224 446q-13 0-22.5-9.5T192 414v-64q0-13 9.5-22.5T224 318t22.5 9.5T256 350v64q0 13-9.5 22.5T224 446zm575 0q-13 0-22.5-9.5T767 414v-64q0-13 9.5-22.5T799 318t22.5 9.5T831 350v64q0 13-9.5 22.5T799 446zM192 577zm640 0zm-320-65q-106 0-182 74-61 60-73 144-2 14 7.5 25t23.5 11q12 0 21-8t11-19q9-62 55-107 57-56 137-56t137 56q46 45 55 107 2 12 11 19.5t21 7.5q14 0 24-11t7-25q-12-83-73-144-76-74-182-74z"/></symbol>
</defs>
</svg>
And then later reference the IDs:
<svg><use xlink:href="#si-ant-frown"></use></svg>
But when I try to just include the individual SVGs inline, I can't seem to get the sizing right. Seems like there's supposed to be a balance between the viewbox and the width and height properties, but I'm either seeing a portion of a giant image or a smaller image with a huge empty field around it.
huge empty field:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 5000 5000" version="1.1" style="width:200;height:200;position:absolute;">
<path d="M512 0Q408 0 313 41T150 150 41 313 0 512t41 199 109 163 163 109 199 41 199-41 163-109 109-163 41-199-41-199-109-163T711 41 512 0zm309 376L406 781q-10 9-23 9t-23-9L202 629q-10-9-10-22.5t10-22.5q9-10 22.5-10t22.5 10l136 129 393-382q9-9 22.5-9t22.5 9q10 9 10 22.5T821 376z"/>
</svg>
partial giant image:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" version="1.1" style="width:500;height:500;position:absolute;">
<path d="M512 0Q408 0 313 41T150 150 41 313 0 512t41 199 109 163 163 109 199 41 199-41 163-109 109-163 41-199-41-199-109-163T711 41 512 0zm309 376L406 781q-10 9-23 9t-23-9L202 629q-10-9-10-22.5t10-22.5q9-10 22.5-10t22.5 10l136 129 393-382q9-9 22.5-9t22.5 9q10 9 10 22.5T821 376z"/>
</svg>
Does someone feel like explaining the relationship between the paths, viewbox and height/width or should I just delete this question and study Sara Soueidan?
In gratitude as always.
I'm trying to understand how the css styling is working inside an svg here is an exemple of an svg i'm using:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
<style>.cls-1{isolation:isolate;}.cls-2,.cls-3{fill:#ef8989;}.cls-3{mix-blend-mode:screen;}</style>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>
And here is how i'm trying to move the inline style to an external css file :
.cls-1 {
isolation : isolate;
}
.cls-3 {
mix-blend-mode : screen;
fill : #ef8989;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28">
<g class="cls-1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/>
<polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</svg>
Obviously there is something I don't understand on how to translate inline style to CSS style, my guess is that my issue is around here: .cls-1{isolation:isolate;}.cls-2,
I must have something to specify for the class cls-2 but didn't manage to get my head around this.
Thanks for any clarification and sorry if the question has been already asked couldn't find anything about it.
Matth
You forgot .cls-2, for the fill color.
Coma separated selectors in CSS means they all get the following defined styles.
.cls-1{
isolation:isolate;
}
.cls-2,
.cls-3{
fill:#ef8989;
}
.cls-3{
mix-blend-mode:screen;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"> <defs>
</defs>
<title>アセット 2</title>
<g class="cls-1">
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-2" points="0 0 0 28 28 28 28 14 28 0 0 0"/><polygon class="cls-2" points="0 14 0 0 12.2 0 19.2 0 12.2 14 19.2 28 12.2 28 0 28 0 14"/>
<polygon class="cls-3" points="28 28 28 14 28 0 19.2 0 12.2 14 19.2 28 28 28"/>
</g>
</g>
</g>
</svg>
Safari 7.0 & 8.0 & Chrome 40.X, Will Not Display SVGs With Fills Using , When A Negative Scale Is Set.
Research suggests that this maybe due to a recent Chrome Issue:
https://code.google.com/p/chromium/issues/detail?id=447707
After a couple hours of research I am not able to find any known issues for Safari 8.0 or 7.0. Please note this issue is fixed in Safari 8.1.2.
Does anyone know how to make the image properly display in the background of this SVG for Chrome 40.X & Safari 7.0 & 8.0? I have confirmed that removing the negative scale does fix this issue, but I'd greatly prefer to not have to remove the scale. Any other ideas?
Here is the code for the SVG:
<svg style="stroke-width: 20px; stroke-dasharray: 50, 50; stroke-opacity: 1; stroke: rgb(172, 245, 82); transition: stroke 500ms ease 500ms; stroke-linecap: round; stroke-linejoin: round;" fill="url(#a_fabricPattern)" class="svg-container svgStroke" version="1.1" id="a_svgContainer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1000 1020" xml:space="preserve">
<defs>
<pattern patternUnits="userSpaceOnUse" id="a_fabricPattern" width="5730" height="4650" x="0" y="0">
<image x="0" y="0" id="fabricBgID" width="5730" height="4650" xlink:href="http://blob.apliiq.com/sitestorage/cropped-fabrics/805_573_465.jpg"></image>
</pattern>
</defs>
<g id="svgGtag">
<g transform="translate(0,1020) scale(0.130000,-0.130000)">
<path d="M1222 6277 l-262 -262 0 -2240 0 -2240 218 -218 217 -217 1171 0
1171 0 246 254 247 254 0 2210 0 2210 -257 256 -258 256 -1115 0 -1115 0 -263
-263z m1948 -2477 l0 -1760 -575 0 -575 0 0 1760 0 1760 575 0 575 0 0 -1760z"></path>
<path d="M5104 6407 c-77 -73 -205 -193 -285 -267 -79 -74 -197 -184 -262
-246 l-117 -111 2 -334 3 -334 188 -5 187 -5 3 -1522 c2 -1261 0 -1524 -11
-1528 -8 -3 -102 -5 -209 -5 l-195 0 6 -31 c3 -17 6 -231 6 -475 l0 -444 945
0 945 0 0 475 0 475 -197 2 -198 3 -3 2243 -2 2242 -333 0 -332 -1 -141 -132z"></path>
</g>
</g>
</svg>