I have the following svg:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg
id="dude"
version="1.1"
baseProfile="basic"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%"
height="100%"
viewBox="0 0 300 300"
preserveAspectRatio="xMidYMid meet"
class="global"
>
<style type="text/css"><![CDATA[
.global {
fill: grey;
}
.dude {
fill: white;
}
]]></style>
<rect x="0" y="0" width="300" height="300" stroke-width="0" />
<g transform="translate(150,375)">
<g class="dude" transform="scale(0.85)">
<circle cx="0" cy="-300" r="90" />
<circle cx="0" cy="-75" r="130" />
</g>
</g>
</svg>
It works fine, but the <rect> is not needed. However when I remove it then the whole svg disappears. I thought maybe its because there is no width and height. But even if I add this via CSS, the svg disappears.
https://jsfiddle.net/L5v9tpsm/
How can I get the circles and background to show, without the <rect>?
Related
I have svg icon, looking like add to watchlist but background color doesn't work on the firefox browser, any help will be appreciated.
svg {
background-color: #1ebaed;
border: 1px solid #ffffff;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40">
<defs>
<image width="40" height="40" id="watchlist" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAAXNSR0IB2cksfwAAAYBQTFRFAAAAAAAAAAAAAAAADw8PJSUlNDQ0Ojo6Ozs7Nzc3LS0tGRkZFxcXUFBQp6en5OTk+Pj4/////Pz88PDwxsbGdHR0Kysrf39/6+vr+/v7tLS0W1tb6enpyMjIe3t7R0dHPT09X19fq6ur7u7unp6eFhYWCgoK7OzsV1dXIiIiurq63t7eNjY2EBAQvb298/PzNTU1Li4uDg4OBQUFtra2SUlJBwcHvLy8fX19ERERrKys/f393NzcHh4e9PT09vb2AQEBkJCQEhISBAQEra2t8vLyISEhpqamOTk50tLSJCQkhoaGZGRkpaWlTExMzc3NlpaWxMTECAgIwsLC4uLiDAwM1dXVQUFBiYmJODg45+fn/v7+Tk5O4eHhjIyMCQkJdXV119fXYmJic3NzMjIyeHh4iIiI2dnZv7+/AgICbm5ueXl5ExMTqampdnZ2Ly8vGxsbGBgYTU1NRkZGSkpKysrK9/f35eXlQkJCx8fHcXFxn5+fpKSkk5OTQ0NDFRUVnB3CTAAAAIB0Uk5T3O3y//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9MrCj1AAABXUlEQVR4nGNgYCQKMDAwMRMFmBgYiVPIOKqQRgpZWNnYOTi5uPEr5OHl4xcQBAIhYRFRMZwKucUlBJGApBQ7doXSMmB5WTl5BUUlZTBbRRVToZoKWEpdA8LV1AJztXXQFerqgSX0DYBsVkMjZmZjE4iAKapCM3OIuyyYmS2tBKxt5JmZbe3AIvYKyAodHCHq1J2YnV1ADFc3ZmZ3iBi/KpJCD6hHPR2YvazBLG9mZh+ooC+SQj+omD8zsxiEFQAMBahgIJLCoGCIWEgQc2gYmBXOzBwBDc5IZM+4RYEFo2OYmdligZJxzMzxsRCFCajBwwYJ7URgwDglJacARVIh6tLQA5wrHSyeYQvhZmZB7M3GjMKcXLCURF5+QaFXEcTRicVYE0VJKVjW2lW4DMwo9w7FmiiAoMJFWwgaKBKVVU5IMhgJN95QMaK6praqrh5VfFBlrpGhkOjCntjqAwB2bUIilx2T4wAAAABJRU5ErkJggg=="/>
</defs>
<style>
tspan { white-space:pre }
</style>
<g id="Mobile View Expanded">
<use id="Watchlist icon" style="mix-blend-mode: lighten" href="#watchlist" x="0" y="0" />
</g>
</svg>
In order to avoid repetitive coordinates, I would like to be able to get coordinates from a common style. However, when I tried this, it did not work. Is this just a syntactic mistake? Is there any way to achieve this?
works:
<rect x="0" y="0" width="30" height="30">
does not work:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="288mm" height="170mm" viewBox="0 0 288 170" version="1.1">
<style type="text/css">
<![CDATA[
rect {x:0;y:0;height:15;width:15; }
.a {fill:#ff0000;}
.b {fill:#00ff00;}
]]>
</style>
<g transform="translate(50,35)">
<rect/>
</g>
<g transform="translate(50,70)">
<rect/>
</g>
</svg>
You can use a use element together with a symbol to provide a common reusable component.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="288mm" height="170mm" viewBox="0 0 288 170" version="1.1">
<symbol id="r">
<rect width="15" height="15"/>
</symbol>
<g transform="translate(50,35)">
<use href="#r" fill="blue"/>
</g>
<g transform="translate(50,70)">
<use href="#r" fill="red"/>
</g>
</svg>
So i have this SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>Gender Neutral User-100</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="#ff0000" color="#ff0000" sketch:type="MSPage">
<g id="Social-Activity" sketch:type="MSArtboardGroup" fill="#ff0000" transform="translate(-347.000000, -337.000000)">
<image fill="#ff0000" id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
</g>
</g>
</svg>
Which looks like
I want to fill some color inside it using CSS
But dont know how to do it. Tried fill property but no success.
Here is a fiddle for the SVG code.
I am embedding this SVG in my html using <object>...</object> tag.
The bitmap nature of the included image defies svg's basic approach of vector graphics.
One option is to combine the image with svg drawing primitives:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>Gender Neutral User-100</title>
<desc>Created with sketchtool.</desc>
<defs>
<style type="text/css"><![CDATA[
.filler {
color: #ff0000;
fill: #ccccff;
stroke: none;
stroke-width: 1
}
]]></style>
</defs>
<circle cx="25" cy="18" r="12" class="filler"/>
<circle cx="25" cy="55" r="20" class="filler"/>
<g id="Page-1" sketch:type="MSPage">
<g id="Social-Activity" sketch:type="MSArtboardGroup" transform="translate(-347.000000, -337.000000)">
<image id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
</g>
</g>
</svg>
Superfluous attributes have been removed from the g and image elements. The code is available as this fiddle.
This question already has answers here:
SVG USE element and :hover style
(3 answers)
Closed 7 years ago.
I try to apply css-style to svg-elements. I want to do this without any script.
While the style seems not to work on a <defs>:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
<g id="month">
<!-- first row -->
<g transform="translate(50 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Mon</text>
</g>
<g transform="translate(80 40)">
<use xlink:href='#box'/>
<text x="5" y="15" fill="grey">Thu</text>
</g>
</g>
</defs>
<use xlink:href='#month'/>
</svg>
This works:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="80">
<style>
rect:hover {
opacity: 0.5;
}
</style>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" style="fill:green;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
Is there a way to apply the css? Is there maybe a different way to apply it to a <defs>-element? Or any workaround?
EDIT -- This is an answer to the original question which has now been updated and invalidates the response.
Sure, just give the use a class or ID..
.box {
fill: green;
stroke-width: 1;
stroke: rgb(0, 0, 0);
}
.box:hover {
fill: red;
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="80">
<defs>
<rect id="box" x="0" y="0" width="30" height="20" rx="3" ry="3" />
</defs>
<use xlink:href='#box' class="box" />
</svg>
I came across this CSS property for IE and Mozilla
I intend to mask an HTML element but I can't seem to work it. Please I need your help, this is my code
.download {
mask: url(image/download.svg#Capa_1);
-webkit-mask: url("image/download.svg") top left / cover;}
and this is my SVG file
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M256,288l128-128h-96V32h-64v128h-96L256,288z M372.363,235.636l-35.87,35.871L466.533,320L256,398.509L45.467,320
l130.04-48.493l-35.871-35.871L0,288v128l256,96l256-96V288L372.363,235.636z"/>
</svg>
Use SVG for the content and the mask. For example:
<svg>
<defs>
<mask id="mask1" x="0" y="0" width="1000" height="1000" >
<rect x="0" y="0" width="1000" height="1000"
style="stroke:none; fill: #999999"/>
</mask>
</defs>
<rect x="1" y="1" width="100" height="100"
style="stroke: none; fill: #000000; mask: url(#mask1)"/>
</svg>
References
SVG Masks