How to wrap SVG content? - wordpress

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!!

Related

How do I target each circle within svg using css?

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!

Hover change color on SVG

In the code below, I'd like to have both eyes and eye brows change color on hover. I can get it to work if you hover on the left eye, but not the right eye. The right eye brow also has a weird fill on hover. I assume this has to do with general sibling selector ~ not working backwards. This is not my SVG code and I'm ignorant on how to combine the eyes, if that's possible.
.st6 {
fill: none;
stroke: #F3C3B3;
stroke-miterlimit: 10;
}
.st7 {
fill: #B88F7C;
stroke: #F3C3B3;
stroke-miterlimit: 10;
}
.st6:hover{
stroke:#d5b4a7;
}
.st7:hover{
stroke: #FFFFFF;
}
.st6:hover ~.st6{fill:#d5b4a7;}
.st6:hover ~ .st7{
fill:#d5b4a7;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
<svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 257.9 872.3" style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve">
<g id="Eyesbm">
<path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/>
<path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/>
</g>
</svg>

that ?
.st6, .st7 {
fill : none;
stroke : #F3C3B3;
stroke-miterlimit : 10;
}
.st7 {
fill : #B88F7C;
}
#Eyesbm:hover .st6 {
stroke :#d5b4a7;
}
#Eyesbm:hover .st7 {
stroke : #FFFFFF;
}
#Eyesbm:hover #Right_Eyebrow {
fill:#d5b4a7;
}
<svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 257.9 872.3"
style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve">
<g id="Eyesbm">
<path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/>
<path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/>
</g>
</svg>

transition not working on SVG

I am trying to animate an SVG where I want my line tags inside SVG to show smoothly when I hover over the SVG. I have applied CSS transition to it but it is not working.
here is my example:https://codepen.io/Ali_Farooq_/pen/WoaRMV?editors=1100
I'm new to animating SVGs and I think there is some sort of bug that I don't know of. Any advice or tip would be appreciated.
Here is my code
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 230.8 181.7" style="enable-background:new 0 0 230.8 181.7;">
<circle id="XMLID_1_" class="circle" cx="115.4" cy="90.9" r="86.9"/>
<rect id="XMLID_2_" x="100.6" y="20.9" class="rectangle" width="29.6" height="107.2"/>
<polygon id="XMLID_3_" class="polygon" points="136.6,128.1 115.1,165.4 93.6,128.1 "/>
<line id="XMLID_4_" class="lines line1" y1="40.6" x2="230.8" y2="40.6"/>
<line id="XMLID_5_" class="lines line2" y1="133.6" x2="230.8" y2="133.6"/>
<g id="XMLID_6_">
<path id="XMLID_10_" d="M20.5,79.7V54.1h7.2c2.2,0,4.2,0.5,5.9,1.5s3,2.4,4,4.2s1.4,3.9,1.4,6.3v1.6c0,2.4-0.5,4.5-1.4,6.3
s-2.3,3.2-4,4.2s-3.7,1.5-6,1.5H20.5z M23.9,56.9V77h3.6c2.6,0,4.6-0.8,6.1-2.4s2.2-3.9,2.2-6.9v-1.5c0-2.9-0.7-5.2-2-6.8
c-1.4-1.6-3.3-2.4-5.8-2.5H23.9z"/>
<path id="XMLID_13_" d="M63.8,67.7c0,2.5-0.4,4.7-1.3,6.6s-2,3.3-3.6,4.3s-3.4,1.5-5.4,1.5c-2,0-3.8-0.5-5.4-1.5s-2.8-2.4-3.6-4.2
s-1.3-4-1.3-6.4v-1.8c0-2.5,0.4-4.6,1.3-6.5s2.1-3.3,3.6-4.3s3.4-1.5,5.4-1.5c2.1,0,3.9,0.5,5.4,1.5s2.8,2.4,3.6,4.3
s1.3,4.1,1.3,6.6V67.7z M60.5,66.1c0-3-0.6-5.4-1.8-7s-2.9-2.4-5.1-2.4c-2.1,0-3.8,0.8-5,2.4s-1.9,3.9-1.9,6.8v1.9
c0,2.9,0.6,5.3,1.9,6.9s2.9,2.5,5.1,2.5c2.2,0,3.9-0.8,5.1-2.4s1.8-3.9,1.8-6.8V66.1z"/>
<path id="XMLID_17_" d="M74.4,71.6l0.5,3.4l0.7-3l5.1-17.9h2.8L88.5,72l0.7,3.1l0.5-3.4l4-17.5h3.4l-6.2,25.6h-3.1l-5.3-18.7
l-0.4-2l-0.4,2l-5.5,18.7h-3.1L67,54.1h3.4L74.4,71.6z"/>
<path id="XMLID_19_" d="M120.5,79.7h-3.4L104.2,60v19.7h-3.4V54.1h3.4l12.9,19.8V54.1h3.4V79.7z"/>
<path id="XMLID_21_" d="M129.9,77H142v2.8h-15.5V54.1h3.4V77z"/>
<path id="XMLID_23_" d="M164.4,67.7c0,2.5-0.4,4.7-1.3,6.6s-2,3.3-3.6,4.3s-3.4,1.5-5.4,1.5c-2,0-3.8-0.5-5.4-1.5s-2.8-2.4-3.6-4.2
s-1.3-4-1.3-6.4v-1.8c0-2.5,0.4-4.6,1.3-6.5s2.1-3.3,3.6-4.3s3.4-1.5,5.4-1.5c2.1,0,3.9,0.5,5.4,1.5s2.8,2.4,3.6,4.3
s1.3,4.1,1.3,6.6V67.7z M161,66.1c0-3-0.6-5.4-1.8-7s-2.9-2.4-5.1-2.4c-2.1,0-3.8,0.8-5,2.4s-1.9,3.9-1.9,6.8v1.9
c0,2.9,0.6,5.3,1.9,6.9s2.9,2.5,5.1,2.5c2.2,0,3.9-0.8,5.1-2.4S161,71,161,68V66.1z"/>
<path id="XMLID_26_" d="M183.2,73h-10.7l-2.4,6.7h-3.5l9.8-25.6h3l9.8,25.6h-3.5L183.2,73z M173.5,70.3h8.7l-4.4-12L173.5,70.3z"/>
<path id="XMLID_29_" d="M192.6,79.7V54.1h7.2c2.2,0,4.2,0.5,5.9,1.5s3,2.4,4,4.2s1.4,3.9,1.4,6.3v1.6c0,2.4-0.5,4.5-1.4,6.3
s-2.3,3.2-4,4.2s-3.7,1.5-6,1.5H192.6z M196,56.9V77h3.6c2.6,0,4.6-0.8,6.1-2.4s2.2-3.9,2.2-6.9v-1.5c0-2.9-0.7-5.2-2-6.8
c-1.4-1.6-3.3-2.4-5.8-2.5H196z"/>
</g>
<g id="XMLID_8_">
<path id="XMLID_36_" d="M88.2,107.9h-5.8V118h-3.3V93.1h8.2c2.8,0,5,0.6,6.5,1.9c1.5,1.3,2.3,3.1,2.3,5.6c0,1.5-0.4,2.9-1.3,4
c-0.8,1.2-2,2-3.5,2.6l5.8,10.6v0.2h-3.5L88.2,107.9z M82.4,105.2h5c1.6,0,2.9-0.4,3.9-1.3c1-0.8,1.4-2,1.4-3.4
c0-1.5-0.5-2.7-1.4-3.5s-2.2-1.2-4-1.3h-5V105.2z"/>
<path id="XMLID_39_" d="M114.7,106.5h-10.8v8.8h12.5v2.7h-15.8V93.1h15.6v2.7h-12.4v8h10.8V106.5z"/>
<path id="XMLID_41_" d="M127.8,106.9c-2.8-0.8-4.9-1.8-6.1-3c-1.3-1.2-1.9-2.6-1.9-4.4c0-2,0.8-3.6,2.3-4.9
c1.6-1.3,3.6-1.9,6.1-1.9c1.7,0,3.2,0.3,4.6,1c1.3,0.7,2.4,1.6,3.1,2.7c0.7,1.2,1.1,2.4,1.1,3.8h-3.3c0-1.5-0.5-2.7-1.4-3.6
s-2.3-1.3-4-1.3c-1.6,0-2.9,0.4-3.8,1.1c-0.9,0.7-1.4,1.7-1.4,3c0,1,0.4,1.9,1.3,2.6c0.9,0.7,2.3,1.3,4.4,1.9
c2.1,0.6,3.7,1.2,4.9,1.9c1.2,0.7,2,1.5,2.6,2.5c0.6,0.9,0.8,2,0.8,3.3c0,2-0.8,3.6-2.4,4.8c-1.6,1.2-3.7,1.8-6.3,1.8
c-1.7,0-3.3-0.3-4.8-1c-1.5-0.7-2.6-1.6-3.4-2.7c-0.8-1.1-1.2-2.4-1.2-3.9h3.3c0,1.5,0.6,2.7,1.7,3.6c1.1,0.9,2.6,1.3,4.5,1.3
c1.7,0,3.1-0.4,4-1.1c0.9-0.7,1.4-1.7,1.4-2.9c0-1.2-0.4-2.2-1.3-2.8S130.1,107.5,127.8,106.9z"/>
<path id="XMLID_43_" d="M158.8,93.1V110c0,2.3-0.7,4.3-2.2,5.8c-1.5,1.5-3.5,2.3-6,2.5l-0.9,0c-2.7,0-4.9-0.7-6.5-2.2
c-1.6-1.5-2.4-3.5-2.5-6.1v-17h3.2v16.9c0,1.8,0.5,3.2,1.5,4.2c1,1,2.4,1.5,4.2,1.5c1.9,0,3.3-0.5,4.3-1.5c1-1,1.5-2.4,1.5-4.2
V93.1H158.8z"/>
<path id="XMLID_45_" d="M168.2,93.1l8.1,20.3l8.1-20.3h4.3V118h-3.3v-9.7l0.3-10.5l-8.2,20.1h-2.5l-8.2-20.1l0.3,10.4v9.7H164V93.1
H168.2z"/>
<path id="XMLID_47_" d="M208.6,106.5h-10.8v8.8h12.5v2.7h-15.8V93.1h15.6v2.7h-12.4v8h10.8V106.5z"/>
</g>
<g id="XMLID_7_">
<path id="XMLID_32_" d="M24.9,93.2l8.1,20.3l8.1-20.3h4.3V118h-3.3v-9.7l0.3-10.5L34.3,118h-2.5l-8.2-20.1l0.3,10.4v9.7h-3.3V93.2
H24.9z"/>
<path id="XMLID_34_" d="M58.4,105.7l6.5-12.5h3.7L60,108.8v9.3h-3.3v-9.3l-8.6-15.6h3.8L58.4,105.7z"/>
</g>
</svg>
and my CSS
.circle {
fill: none;
stroke: #767270;
stroke-width: 8;
stroke-miterlimit: 10;
}
.rectangle {
fill: #767270;
stroke: #767270;
stroke-width: 5;
stroke-miterlimit: 10;
}
.polygon {
fill: #767270;
stroke: #767270;
stroke-width: 5;
stroke-miterlimit: 10;
}
.lines{
fill: none;
stroke: #46677f;
stroke-width: 3;
stroke-miterlimit: 10;
stroke-dasharray: 235;
stroke-dashoffset: 235;
tranistion: stroke-dashoffset 5s linear;
}
svg:hover .lines {
stroke-dashoffset: 0;
}
#XMLID_6_ {
fill: #46677f;
}
#XMLID_8_ {
fill: #46677f;
}
#XMLID_7_ {
fill: #46677f;
}
#keyframes linesGrowth {
from {
stroke-dashoffset: -235;
} to {
stroke-dashoffset: 0;
}
}

SVG CSS Hover Styling

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>

how to remove xlink default styling

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*/
}

Resources