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.
Related
This question already has answers here:
How to resize the ClipPath area of SVG?
(2 answers)
masking image with CSS
(2 answers)
Closed 10 months ago.
I'm trying to figure out a way to use an SVG path to hide portions of divs via CSS. The current method I know is using the SVG to clip the entire div. I'm wondering if there's a way to use a mask instead.
My desired result would be to clip only a portion of the div. For the example I was working on, would be the right side of the div.
I've linked my attempts, but at best I can only get clipping to work.
JSFiddle link.
.st0{fill:#000;}
div {
height: 100px;
background: red;
margin-bottom: 20px;
}
.wide {
width: 80%;
}
.short {
width: 20%;
}
.mask {
clip-path: url(#clip);
}
<div class="mask wide"></div>
<div class="mask short"></div>
<svg viewBox="0 0 119.5 290.5">
<defs>
<clippath id="clip">
<path class="st0" d="M12.1,0l27.1,35.2L18.8,72.1l49.3,41.3L9.9,172.6c0,0,43.6,47.1,44.4,44.9c0.9-2.2,36,12.9,32,13.3
s-63.6,12-63.6,12s6.2,17.8,7.6,17.8c1.3,0,55.1,0.9,53.8,0c-1.3-0.9-47.6,17.3-47.6,17.3l-21.3,12.6h104.2V0H12.1z"/>
</clippath>
</defs>
</svg>
Browser support for CSS masks is patchy at present.
However, depending on your requirements, you may be able to use CSS blend modes instead – see the example below. I have yet to find detailed, precise, non-technical descriptions of each blend mode – the best I have found today is this. Some experimentation may be required.
body {
margin: 5vh 5vw;
font-family: sans-serif;
background: #ddd;
}
.background {
background-image: url("https://images.unsplash.com/photo-1531786343146-f297424a3171?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
height: 90vh;
position: relative;
}
.overlay {
position: absolute;
top: 5vh;
left: 5vw;
right: 5vw;
bottom: 5vh;
background-color: transparent;
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.overlay-text {
font-size: 20pt;
color: white;
display: inline-block;
position: relative;
}
.overlay-shape {
fill: white;
}
.overlay:hover {
background-color: #ffffffee;
mix-blend-mode: lighten; /* the overlay is painted only in areas where it is lighter than its parent (the background) */
}
.overlay:hover .overlay-text {
color: black;
}
.overlay:hover .overlay-shape {
fill: black;
}
<section class="background">
<div class="overlay">
<h1 class="overlay-text">HOVER ME.</h1>
<svg viewBox="0 0 1642 1920" xmlns="http://www.w3.org/2000/svg">
<path class="overlay-shape" d="m8071 19178c-20-52-31-109-71-340-22-130-52-270-66-310-64-181-200-376-489-703-316-357-419-485-518-646-188-304-308-621-386-1014-69-348-73-782-11-1170 38-236 61-508 70-825 11-347 17-416 55-624 95-518 236-1077 390-1556 35-107 86-256 113-330 48-127 64-180 143-455 43-152 144-464 180-560 47-122 66-166 155-355 84-180 137-316 192-500 50-164 90-320 82-315-5 3-20 26-36 53-57 99-261 420-393 619-275 416-294 456-530 1118-16 44-79 224-141 400-100 287-224 625-300 820-15 39-39 99-53 135-103 265-311 724-439 969-295 565-575 943-883 1190-342 275-680 465-1095 614-158 57-278 92-571 166-481 121-711 237-930 471-62 66-114 118-116 116-2-1 30-120 71-262 116-403 173-647 212-906 34-231 29-755-12-1193-75-792 266-1701 914-2435 137-156 455-470 625-617 292-255 570-443 892-607 61-30 108-55 105-56-3 0-30 9-60 19-550 191-677 239-895 336-418 186-696 250-1085 249-293 0-459-28-761-128-74-24-188-58-254-76-252-66-318-90-665-238-289-122-420-176-514-208-99-34-359-88-695-144-162-28-296-52-298-54-8-8 104-44 202-65 154-33 221-84 580-445 272-274 440-436 550-530 167-142 583-395 960-582 377-186 570-254 920-324 88-17 237-49 330-71 168-38 174-39 520-54 525-23 1114-37 1255-30 69 4 168 16 220 26 52 11 127 27 165 35 209 43 587 152 790 229 228 86 282 111 725 338 135 69 310 154 390 190 146 65 340 141 345 135 4-3-81-75-210-177-84-66-297-210-377-253-79-44-267-129-362-164-97-37-356-114-380-114-14 0-212-66-331-110-111-41-359-167-498-253-76-47-242-160-370-250-268-189-323-225-582-372-347-196-532-331-710-516-130-135-210-243-342-464-337-566-707-1019-1100-1348-137-115-173-150-173-173 0-14 139 6 277 40 148 37 500 135 758 211 370 110 488 142 730 196 440 98 527 119 730 170 677 171 991 284 1252 454 97 63 157 113 343 285 69 64 179 162 245 220 159 138 438 418 502 504 108 146 152 240 301 641 87 235 258 795 343 1122 12 46 23 83 26 83 2 0 3-593 2-1317-3-1656 6-2409 36-3133 58-1347 59-1395 60-2195 0-831 0-839-51-1090-44-215-64-358-64-453 0-120 14-153 84-193 54-31 97-36 143-18 15 6 51 11 80 10 65-2 107 18 122 59 8 23 5 125-9 393-38 710-50 1019-60 1527-19 989-32 1309-85 2112-41 606-50 953-65 2398-6 553-15 1156-20 1340s-9 358-9 385v50l24-85c117-421 505-1058 909-1490 291-311 669-585 1091-790 180-87 358-155 705-268 431-140 614-217 805-338 200-126 328-165 886-268 135-26 293-59 350-75 301-85 594-219 990-452 64-38 119-69 123-69 36 0-126 285-407 714-106 161-193 311-294 505-194 370-240 452-349 616-185 281-327 428-562 581-81 53-243 169-360 258-278 210-469 347-595 426-214 135-476 255-689 316-54 15-96 29-94 31s48-7 102-21c170-42 351-51 1019-51 673 0 689 1 1039 65 577 105 757 158 1147 336 267 121 696 354 877 476 154 104 304 234 672 587 262 251 326 308 433 385 83 59 101 66 236 91 46 9 102 23 124 32 51 21 43 24-118 53-166 29-526 104-666 139-141 35-228 69-569 223-456 206-488 219-756 298-72 21-164 50-205 65-270 98-482 147-714 166-372 30-761-42-1180-218-71-30-179-73-240-95-60-22-145-52-187-68-43-15-78-26-78-24 0 1 48 36 108 76 265 180 538 430 723 663 53 66 149 197 214 290 136 196 235 329 350 470 204 251 326 431 410 610 102 217 166 463 185 718 21 279 39 385 89 540 94 293 141 532 151 772 5 105 17 261 29 347 17 136 26 174 72 295 69 185 154 377 246 553 80 154 141 250 254 395 64 83 117 171 107 180-2 2-62-30-133-72-328-191-679-380-800-432-98-41-259-89-630-186-465-122-519-140-845-283-74-32-153-65-175-72-284-91-559-238-790-420-123-97-350-332-449-465-136-185-215-317-362-610-132-262-222-432-289-545-18-30-89-149-157-265-307-516-444-777-548-1040-66-165-149-340-230-480-35-60-81-141-103-180-137-238-223-478-307-860-103-469-163-659-253-809-39-65-201-267-261-326-39-37-49-43-64-33-9 6-16 15-15 20 2 9 509 1275 568 1418 21 50 48 116 61 148 13 31 35 83 48 115 13 31 40 95 61 142 181 416 268 691 385 1220 72 324 109 456 235 835 163 490 232 823 266 1270 14 190 21 1674 8 1845-33 462-221 862-615 1311-56 64-239 253-405 420-527 529-566 593-668 1093-21 102-41 189-44 192-4 4-11-5-16-18zm-2212-9354c134-49 153-57 546-215 193-77 370-149 395-159 25-9 86-34 135-55 552-228 885-353 984-370 38-6 41-9 41-40 0-38-12-45-74-45-55 0-241 34-389 71-211 53-359 122-527 247-225 167-332 221-685 350-60 22-146 56-190 75-85 36-356 177-341 177 4 0 52-16 105-36zm3576-403c-29-27-323-243-400-294-215-141-397-197-646-197h-116l-7 32c-11 56 34 98 189 175 211 106 493 194 865 271 112 23 127 25 115 13zm-948-666c274-56 532-161 923-375 139-76 273-139 439-207 152-61 477-171 589-198 40-9 71-20 68-22-3-3-78 11-168 31s-257 56-373 81c-262 57-467 114-604 167-58 23-270 123-471 223-414 206-468 230-571 247-85 13-101 23-88 56 7 19 15 22 70 22 34 0 118-11 186-25z" transform="matrix(.1 0 0 -.1 0 1920)"/>
</svg>
</div>
</section>
Credits: code image
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 trying to create a wave effect on a website like this where there is a main color wave (dark purple) and then lighter colored waves along the edge. I have tried positioning multiple paths with CSS position and top but cannot get them to work.
Here's my basic wave:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path class="green" fill="#0b5b41" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,186.7C480,192,600,224,720,245.3C840,267,960,277,1080,250.7C1200,224,1320,160,1380,128L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
Mybe so
Three separate waves. The color of each wave can be selected to your liking.
The app is responsive and looks the same in all modern browsers
.w1 {
fill:#0E7452;
opacity:0.4;
}
.w2 {
fill:#0E7452;
opacity:0.7;
}
.w3 {
fill:#0B5B41;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 320" version="1.1">
<path class="w1" d="m-1.2 155.9c0 0 45.8-1.8 68.7-0.8 96.9 4.3 213.1 15.7 289.6 28.9 120 19 241.7 41.5 361.7 62.8 120 21.7 269.8 29.2 389.8 2.9C1228.6 222.9 1320 108 1380 76l60-32v224l-60 52-293-1.1H734L363.5 317.2 75.8 322.4 0 268c0 0-1.2-81.2-1.2-112.1z"/>
<path class="w2" d="m-1.2 186.8c0 0 45-1.1 67.5-2 190.8-7.9 184.4-4 297.5 2 120 5.3 241.2 42.3 361.2 63.6 120 21.7 245 23 365-3.3 120-26.7 194-95.4 290.1-145.1 20.1-10.4 60-32 60-32V294H1380 1080 720 360 60 0Z" />
<path class="w3" d="M0 224 60 213.3C120 203 228.9 182.5 348.9 188.2 468.9 193.5 600 224 720 245.3 840 267 960 277 1080 250.7 1200 224 1320 160 1380 128l60-32V320H1380 1080 720 360 60 0Z" />
</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>