So I decided to use some SVGs in the website I'm working on. They're not inline HTML; instead, I linked to them using the object tag. I'm using them as links, and I went the route of using the xlink method. I'm styling them with CSS, and it's working fine except for one thing. The :visited state seems to have its own default styling, and the :visited selector isn't responding in CSS, so I'm having trouble getting rid of this default styling. Any ideas?
XML:
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="svg-style.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="svg" width="100%" height="100%" viewBox="0 0 100 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<a xlink:href="../../paving.html" target="_top">
<g id="Layer1">
<g>
<circle id="circle" cx="50" cy="50" r="45" style="stroke-width:3px;"/>
<path d="M7.556,51.525l-1.372,-0.045l-0.942,-1l0.045,-1.372l1,-0.941l43.961,-14.695l-42.692,18.053Z"/>
<path d="M92.992,51.097l-17.584,-7.309l-24.784,-10.288l0.003,-0.013l-0.379,-0.003l0,-0.012l0.381,-0.012l0.002,-0.005l0.004,-0.005l0.004,-0.004l25.512,8.336l18.104,5.906l0.523,0.763l-0.151,1.313l-0.741,1.095l-0.894,0.238Z"/>
<path d="M48.277,62.5c0,0 0.646,-11.165 0.829,-11.294c0.183,-0.125 1.073,-0.111 1.242,0.015c0.169,0.129 -0.115,10.694 -0.003,11.279c-0.054,-0.036 -2.068,0 -2.068,0Z" style="stroke-width:1px;"/>
<path d="M49.756,41.208l0.646,-0.003l0,-1.289c0,0 -0.398,-0.255 -0.639,-0.029c0.004,0.011 -0.007,1.321 -0.007,1.321l0,0Z" style="stroke-width:1px;"/>
<rect x="50" y="37.274" width="0.37" height="0.481" style="stroke-width:0.5px;"/>
<path d="M50.129,36.165l0.241,0l0,0.366l-0.237,0l-0.004,-0.366Z" style="stroke-width:0.25px;"/>
</g>
<text x="25.402px" y="117.589px" style="font-family:Times;font-size:18px;stroke:none;">Paving</text>
</g>
</a>
</svg>
CSS:
#svg {
fill: #ECEDE8; /*eggshell*/
color: #ECEDE8; /*eggshell*/
stroke: #ECEDE8; /*eggshell*/
}
#svg:hover {
fill: lightgreen;
color: lightgreen;
stroke: lightgreen; /*eggshell*/
}
#svg:visited {
fill: #ECEDE8; /*eggshell*/
color: #ECEDE8; /*eggshell*/
stroke: #ECEDE8; /*eggshell*/
}
#circle {
fill: #FF966A; /*lightorange*/
}
#rect {
fill: none;
stroke: none;
}
#text {
font-size: 5px;
fill: currentColor;
stroke: none;
}
I realize that since because I'm styling XML, the way I'm going about this might be wrong. If it is, does anyone know how to change the styling of the xlink :visited state?
Style the link tags if you want the visited colour to change e.g.
a:visited {
fill: #ECEDE8; /*eggshell*/
color: #ECEDE8; /*eggshell*/
stroke: #ECEDE8; /*eggshell*/
}
Related
I have this
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
How can I style each circle using css? Thank you.
If you know that the SVG markup won't change, then this will suffice:
.wheel * {
// CSS here
}
Otherwise, give the circles a class and write like:
.wheel .wheel-circle {
// CSS here
}
If you mean each circle needs different styles then simply:
.wheel #wheel-circle-1 {
// CSS here
}
.wheel #wheel-circle-2 {
// CSS here
}
Method 1:
The best way would be to add an id to each circle:
<svg class="wheel" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" transform="scale(1.022,1.022)" viewBox="0 0 1024 1024" height="100%" width="100%">
<circle id="innerCircle" fill="#ffffff" cx="512" cy="512" r="110"></circle>
<circle id="outerCircle" stroke="#ffffff" r="456" fill="transparent" stroke-width="33" cx="512" cy="512"></circle>
</svg>
And then just target that.
#innerCircle {
fill: red;
}
#outerCircle {
stroke: blue;
}
Method 2:
But if this is not desirable, try using the nth-child selector on the parent:
.wheel:nth-child(1) {
fill: red;
}
.wheel:nth-child(2) {
stroke: blue;
}
I hope this helps!
I using vue-simple-svg package and Vue.
I sending icon and color to component:
<IconComponent name="comment.svg" color="#ffffff" />
In IconComponent I get props:
<simple-svg
:src="image"
fill-class-name="fill-to-change"
:fill="color"
stroke-class-name="stroke-to-change"
:stroke="color"
custom-id="my-id"
custom-class-name="my-class"
/>
props: {
image: {
type: String,
required: true,
},
color: {
type: String,
required: true,
},
},
But color not change to #ffffff.
So I trying change color using CSS:
I have structure svg file with color:
svg => g => g
I have class .my-class, and I write code:
.my-class g g {
fill: #ffffff;
stroke: #ffffff;
}
I tryimg using:
.fill-to-change {
fill: #ffffff;
}
.stroke-to-change {
stroke: #ffffff;
}
but color not change to white.
File SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 59.1 (101010) - https://sketch.com -->
<title>afb3c770-9343-4219-b68b-48905c19ec63#1.00x</title>
<desc>Created with sketchtool.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
<g id="Icons-/-Interfaces-/-user-plus" fill="#000000">
<path d="M17,19 L17,16.5 C17,16.2238576 17.2238576,16 17.5,16 C17.7761424,16 18,16.2238576 18,16.5 L18,19 L20.5,19 C20.7761424,19 21,19.2238576 21,19.5 C21,19.7761424 20.7761424,20 20.5,20 L18,20 L18,22.5 C18,22.7761424 17.7761424,23 17.5,23 C17.2238576,23 17,22.7761424 17,22.5 L17,20 L14.5,20 C14.2238576,20 14,19.7761424 14,19.5 C14,19.2238576 14.2238576,19 14.5,19 L17,19 Z M14.0425135,13.5651442 C13.4188979,13.8445863 12.7275984,14 12,14 C11.2738711,14 10.5838946,13.8452135 9.96126583,13.5668358 L5.87929558,15.4222768 C5.34380416,15.665682 5,16.1996113 5,16.7878265 L5,17.5 C5,18.3284271 5.67157288,19 6.5,19 L11.5,19 C11.7761424,19 12,19.2238576 12,19.5 C12,19.7761424 11.7761424,20 11.5,20 L6.5,20 C5.11928813,20 4,18.8807119 4,17.5 L4,16.7878265 C4,15.8074678 4.57300693,14.9175857 5.46549264,14.5119103 L8.92215823,12.9406987 C7.75209123,12.0255364 7,10.6005984 7,9 C7,6.23857625 9.23857625,4 12,4 C14.7614237,4 17,6.23857625 17,9 C17,10.5929224 16.2551051,12.0118652 15.0946468,12.927497 L17.6966094,14.0402775 C17.9505071,14.1488619 18.0683068,14.4427117 17.9597225,14.6966094 C17.8511381,14.9505071 17.5572883,15.0683068 17.3033906,14.9597225 L14.0425135,13.5651442 L14.0425135,13.5651442 Z M12,13 C14.209139,13 16,11.209139 16,9 C16,6.790861 14.209139,5 12,5 C9.790861,5 8,6.790861 8,9 C8,11.209139 9.790861,13 12,13 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
I have other solution. I added to scss file filter for example:
&__image {
filter: invert(35%) sepia(36%) saturate(7009%) hue-rotate(2deg) brightness(104%) contrast(88%);
}
To convert the color to the filter format (for example: #ef4f10) use CSS filter generator to convert from black to target hex color.
The best effest is when default color in SVG file is black: fill="#000000".
Use CSS On SVG
svg{
fill: #fff;
stroke: #fff;
}
Hope it will work for you
add !important at the end of style.
eg
.class g g{
fill:#fff!important;
}
#michal
Remove 'fill=""' property from all tag inside svg tag, then you will get result.
The best thing you can do is to bind to attribute
<path v-bind:fill="this.skinColorContent"
export default {
data() {
return {
skinColorContent: 'red',
}
},
}
I want to use SVG in my WordPress site. The content of this SVG will be changed and I want it to be dynamic:
Here is my code:
<div style="height:60px;" class="gmr_main_page_svg_div">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="6773 1755 730 81" style="height:60px;" class="gmr_main_page_svg">
<defs>
<style>
.cls-1 {
clip-path: url(#clip-iPhone_6_7_8_1);
}
.cls-2 {
fill: #0652fd;
}
.cls-3, .cls-4 {
fill: none;
stroke: #0652fd;
}
.cls-3 {
stroke-width: 3px;
}
.cls-4 {
stroke-width: 4px;
}
.cls-5 {
fill: #fff;
font-size: 25px;
font-family: IRANSans-Bold, IRANSans;
font-weight: 700;
}
.cls-6 {
fill: rgba(255,255,255,0);
}
</style>
<clipPath id="clip-iPhone_6_7_8_1">
<rect x="6773" y="1755" width="900" height="81"/>
</clipPath>
</defs>
<g id="iPhone_6_7_8_1" data-name="iPhone 6/7/8 – 1" class="cls-1">
<rect class="cls-6" x="6773" y="1755" width="730" height="81"/>
<g id="Group_2830" data-name="Group 2830" transform="translate(6586 1751)">
<path id="Path_3672" data-name="Path 3672" class="cls-2" d="M1319.065,1810h189.586v-69.9h-131.61Z" transform="translate(-593 -1732)"/>
<path id="Path_3673" data-name="Path 3673" class="cls-3" d="M1319.065,1810h189.586v-69.9h-131.61Z" transform="translate(-600 -1736)"/>
<line id="Line_108" data-name="Line 108" class="cls-4" x1="728" transform="translate(187.5 76.5)"/>
</g>
<text id="خدمات_ما" data-name="خدمات ما" class="cls-5" transform="translate(7376 1779)"><tspan x="130.443" y="22">ویژگیهای طراحی لوگو</tspan></text>
</g>
</svg>
</div>
Here is my a fiddle.
I used some image to SVG converters and this is the output of my image.
You can put the code on functions.php file,
Please check below code -
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
Try it!!
I need to change SVG fill property by adding up a class. Say from #fff to #000. I tried fiddling with two different methods. I got successful with one of either method. Rather I don't prefer the method to use which I was successful.
Method 1: - Succesful.
I just added a class on the body tag and over-ride the svg fill property. Take a look at the code below
var button = document.getElementById("btn");
var body = document.body
var count = false;
button.onclick = changeBackground;
function changeBackground() {
body.classList.toggle('toggle');
}
body {
background: #3d3d3d;
}
.sheetListWhite {
fill: #fff;
}
.slBGColor {
fill: #3d3d3d;
}
.toggle {
background: #fff;
}
.toggle .sheetListWhite {
fill: #3d3d3d;
}
.toggle .slBGColor {
fill: #fff;
}
<svg width="18px" height="18px" viewBox="-2 -2 13 13">
<use xlink:href="#sharedByMe" class="sheetListWhite"></use>
</svg>
<button id="btn"> Change background</button>
<svg style="display:none;">
<symbol id="sharedByMe">
<g id="user-(5)">
<path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
</g>
<g id="shared-folder" transform="translate(6.111111, 5.294118)">
<ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
<path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
</g>
</symbol>
</svg>
See the fiddle HERE
Method 2 - Failed
Instead of adding the class directly to the body tag i added it on a div.
var button = document.getElementById("btn");
var body = document.getElementById("check");
var count = false;
button.onclick = changeBackground;
function changeBackground() {
body.classList.toggle('toggle');
}
div {
height: 300px;
width: 100%;
background: #3d3d3d
}
.sheetListWhite {
fill: #fff;
}
.slBGColor {
fill: #3d3d3d;
}
.toggle {
background: #fff;
}
.toggle .sheetListWhite {
background: #3d3d3d
}
.toggle .slBGColor {
fill: #fff;
}
<div id="check">
<svg width="18px" height="18px" viewBox="-2 -2 13 13">
<use xlink:href="#sharedByMe" class="sheetListWhite"></use>
</svg>
<button id="btn"> Change background</button>
</div>
<svg style="display:none;">
<symbol id="sharedByMe">
<g id="user-(5)">
<path d="M5.76735992,5.07170748 C6.58617985,4.59194553 7.12018634,3.73525063 7.12018634,2.74147173 C7.12020298,1.23365988 5.8385508,0 4.27211846,0 C2.70568612,0 1.42403394,1.23365988 1.42403394,2.74147173 C1.42403394,3.73525063 1.95804042,4.59196155 2.77686035,5.07170748 C1.35282642,5.58574044 0.284796801,6.78512932 0,8.22439918 L0.712025292,8.22439918 C1.06802962,6.64806134 2.52768396,5.48292744 4.27211846,5.48292744 C6.01655296,5.48292744 7.47620731,6.64804532 7.83221163,8.22439918 L8.54423692,8.22439918 C8.25944012,6.75085832 7.19141051,5.55146944 5.76735992,5.07170748 Z M2.13605923,2.74147173 C2.13605923,1.61062486 3.09729421,0.685371939 4.27211846,0.685371939 C5.44694272,0.685371939 6.40817769,1.61062486 6.40817769,2.74147173 C6.40817769,3.87231861 5.44694272,4.79757153 4.27211846,4.79757153 C3.09729421,4.79757153 2.13605923,3.87231861 2.13605923,2.74147173 Z" id="Shape"></path>
</g>
<g id="shared-folder" transform="translate(6.111111, 5.294118)">
<ellipse id="Oval-6" class="slBGColor" cx="2.44444444" cy="2.35294118" rx="2.44444444" ry="2.35294118"></ellipse>
<path d="M3.54444101,1.45883032 C3.94870693,1.45883032 4.27777778,1.13170727 4.27777778,0.729415161 C4.27777778,0.327123049 3.94870693,0 3.54444101,0 C3.14017508,0 2.81110424,0.327140144 2.81110424,0.729415161 C2.81110424,0.781778783 2.81720578,0.832655093 2.82779325,0.881924423 L1.89436023,1.34613656 C1.7598169,1.19301186 1.56441282,1.09413129 1.34443069,1.09413129 C0.940181958,1.09411419 0.611111111,1.42125434 0.611111111,1.82352936 C0.611111111,2.22580437 0.940181958,2.55294452 1.34444788,2.55294452 C1.56439563,2.55294452 1.75974815,2.45413233 1.89429148,2.30105891 L2.82781043,2.76516848 C2.81720578,2.81442071 2.81110424,2.86527993 2.81110424,2.91764355 C2.81110424,3.31991857 3.14017508,3.64705871 3.54444101,3.64705871 C3.94870693,3.64705871 4.27777778,3.31993566 4.27777778,2.91764355 C4.27777778,2.51536853 3.94870693,2.18822839 3.54444101,2.18822839 C3.32445888,2.18822839 3.12903762,2.28710896 2.99449429,2.44025076 L2.06104408,1.97615829 C2.07164873,1.92685476 2.07778465,1.87594426 2.07778465,1.82352936 C2.07778465,1.77116573 2.07168311,1.72028942 2.06109564,1.67102009 L2.99452866,1.20680796 C3.12905481,1.35994975 3.32444169,1.45883032 3.54444101,1.45883032 Z" id="Shape"></path>
</g>
</symbol>
</svg>
Fiddle it HERE
Now you can see I can't override the following classes .slBGColor, .sheetListWhite
How can I get rid of this bug? Any Idea. I don't want to use the svg tag directly instead of use tag. I mean I would like to use all of my SVG from an external resource. Any Help
Thanks.
The "insides" of a <use> cannot be addressed via the <use> element. It is considered opaque/private. As far as the browser is concerned, there is no class="slBGColor" inside the <div>. So .toggle .slBGColor {} does nothing.
You can make it work by restyling the symbol definition itself.
For example, if I make the following two changes to your example, the ellipse in the symbol changes colour based on whether the "toggle" class is set or not.
var body = document.body;
.toggle div {
background: red;
}
https://jsfiddle.net/nuorcj0a/4/
However, be aware that will also change any other references to that symbol on the page.
Trying to stylize a SVG of this multi-color HTML image using CSS so that the right side of the 5 is white on hover.
body {
background-color: gray;
}
svg {
height: 50vh;
fill: white;
}
.html5 g.st2 .st0 {
fill: transparent;
}
.html5:hover path.st0 {
fill: #e44d26;
}
.html5:hover path.st1 {
fill: #f16529;
}
.html5:hover g.st2 .st0 {
fill: white;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-561 1804 379 407" style="enable-background:new -561 1804 379 407;" xml:space="preserve" class="html5">
<g>
<path class="st0" d="M-427.3,1975.7h55.3v-42.9h-59.2L-427.3,1975.7z M-539.3,1821l30.5,341.7l136.8,38l136.9-37.9l30.5-341.8
C-204.7,1821-539.3,1821-539.3,1821z M-261.3,2141l-110.7,30.7v-43.5l-0.1,0l-85.9-23.8l-6-67.3h42.1l3.1,34.9l46.7,12.6l0.1,0v-67
h-93.7l-11.3-126.7h105v-41.9h136.8L-261.3,2141z" />
<path class="st1" d="M-320.4,2017.6H-372v67l46.7-12.6L-320.4,2017.6z M-372,1848.9v41.9h105l-3.8,41.9H-372v42.9h97.4l-11.5,128.7
l-85.9,23.8v43.5l110.7-30.7l26.1-292.1L-372,1848.9L-372,1848.9z" />
<g class="st2">
<polygon class="st0" points="-372,1890.8 -477,1890.8 -465.7,2017.6 -372,2017.6 -372,1975.7 -427.3,1975.7 -431.2,1932.8
-372,1932.8 " />
<polygon class="st0" points="-372,2084.6 -372.1,2084.6 -418.7,2072 -421.9,2037.1 -463.9,2037.1 -457.9,2104.4 -372.1,2128.2
-372,2128.2 " />
</g>
</g>
</svg>
If you open the original svg (https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg) in Illustrator and grab the SVG code you'll notice there's no path/class to manipulate it with. Not sure if the problem can be addressed in CSS or needs to be done in illustrator but any ideas or help would be appreciated.
Try this svg code:
body {
background-color: gray;
}
svg {
height: 50vh;
fill: white;
}
.html5:hover .body,
.html5 .right-fill {
fill: #FFF;
}
.html5 .left-5,
.html5 .right-5 {
fill: grey;
}
.html5:hover .body {
fill: #E34F26;
}
.html5:hover .right-fill {
fill: #EF652A;
}
.html5:hover .left-5 {
fill: #EBEBEB;
}
.html5:hover .right-5 {
fill: #FFF;
}
<svg class="html5" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<title>HTML5 Logo Badge</title>
<path class="body" d="M71,460 L30,0 481,0 440,460 255,512"/>
<path class="right-fill" d="M256,472 L405,431 440,37 256,37"/>
<path class="left-5" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
<path class="right-5" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>