How To Reliably Fill SVGs Using <pattern> in Chrome & Safari - css

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>

Related

Making the full SVG with an image inside as a selectable item

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);
}}

Creating multi-layered SVG waves in CSS

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>

Can't change SVG fill color

I have an SVG. When the user hovers over it I want to change the fill colour on the path. Can someone explain why this isn't working?
svg:hover {
fill: blue;
}
<svg width="0" height="0" class="hidden">
<symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
<title>twitter</title>
<g fill="none" fill-rule="evenodd">
<path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z" fill="#AEB2B4"></path>
<path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
fill="#FFF" fill-rule="nonzero"></path>
</g>
</symbol>
</svg>
<svg class="icon">
<use xlink:href="#twitter"></use>
</svg>

svg:hover {
fill: blue;
}
svg {
fill: #AEB2B4;
}
<svg width="0" height="0" class="hidden">
<symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter">
<title>twitter</title>
<g>
<path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z""></path>
<path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z"
fill="#FFF" fill-rule="nonzero"></path>
</g>
</symbol>
</svg>
<svg class="icon">
<use xlink:href="#twitter"></use>
</svg>

Css priority
When you defined a fill on a <path> element and on the svg svg:hover.
The path element inline style takes priority over the one defined on the svg.

I think you need to match the svg element, eg:
path:hover {
fill: blue;
}​

Sizing Inline SVGs

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.

understanding svg css style

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>

Resources