I have svg for social media icon and everytime I hover on it, it creates this blue underline and nothing seems to take it off. How can I remove it?
Here's how I include it.
<a class="footer-socialmedia-icons" style="padding-right:0.5rem;" target="_blank" href="https://www.facebook.com">
<img width="35px" height="35px" src="/files/IMG/facebook.svg" alt="facebook logo" class="">
</a>
EDIT:
here's the svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
<title>facebook</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="facebook" fill="#DBC5DA">
<path d="M24.826,0 C11.137,0 0,11.137 0,24.826 C0,38.514 11.137,49.652 24.826,49.652 C38.514,49.652 49.652,38.514 49.652,24.826 C49.652,11.137 38.516,0 24.826,0 Z M31,25.7 L26.961,25.7 L26.961,40.096 L20.976,40.096 L20.976,25.7 L18.131,25.7 L18.131,20.612 L20.976,20.612 L20.976,17.321 C20.976,14.964 22.096,11.281 27.016,11.281 L31.451,11.298 L31.451,16.237 L28.232,16.237 C27.708,16.237 26.963,16.499 26.963,17.623 L26.963,20.613 L31.523,20.613 L31,25.7 Z" id="Shape"></path>
</g>
</g>
</svg>
EDIT
As it turns out, the blue line is underneath all tags. Tried text-decoration:none on but it doesn't do a thing.
Some browsers add a border to images in a elements to show them as clickable links.
If you don't want that, add
a img {border:none}
to your CSS.
This is not connected to SVG by the way; it happens on all images inside links.
Related
svg are somewhat tricky. I have some social icons with svg code and when I tried to color change on hover effect, it didn't want to change the color. My svg code looked like this.
<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" />
</svg>
When you have path inside the svg tag just like me, you need to indicate the path to make it change the color.
So the css that solved my issue was:
svg:hover .social-icon {
fill: #color
}
svg:hover{fill: red}
<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" />
</svg>
I need to validate the SVG icon for a drop down list items SVG icon. Each items having unique SVG icon. How can i validate the SVG icon using robot framework.
<span _ngcontent-c16="" class="flexColumnStatic role" style="height:20px; width: 25px; padding-left:4px;"><!----><mat-icon _ngcontent-c16="" class="roleIcon mat-icon mat-icon-inline" inline="true" role="img" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"><defs><path id="__2CNlSzv__editor-a" d="M7,21.2505178 L7,25 L10.7494792,25 L21.8079433,13.9415271 L18.0584641,10.1920448 L7,21.2505178 Z M24.7075406,11.0419275 C25.0974865,10.6519813 25.0974865,10.0220683 24.7075406,9.63212214 L22.3678656,7.29244522 C22.18106,7.1052184 21.9274444,7 21.6629635,7 C21.3984826,7 21.144867,7.1052184 20.9580614,7.29244522 L19.1283155,9.12219255 L22.8777948,12.8716748 L24.7075406,11.0419275 Z"></path></defs><g fill="none" fill-rule="evenodd" transform="translate(-7 -7)"><rect width="32" height="32"></rect><use fill="#000" fill-rule="nonzero" xlink:href="#__2CNlSzv__editor-a"></use></g></svg></mat-icon></span>
I'm making flat selector from floor view with image png with walls of floor and transparent background, i want to <image /> be over o my <a></a> so when i change color of polygons inside, walls will be black - not mix of black and ref and for example rgba(255,255,0.3) over black background fives rgb(139, 101, 101);
TLDR: How to make svg image to be above other elements?
<svg class="floor_svg" version="1.1" preserveAspectRatio="xMinYMin" viewBox="0 0 1080 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image class="area__bck" stroke-width="0" xlink:href="<?=get_template_directory_uri()?>/hood/floor_template/b1-p1.png" preserveAspectRatio="xMinYMin" width="1080" height="800" y="0" x="0"></image>
<a xlink:href="#" data-floor_flat_nr="1">
<polygon points="388,84.5 388,64.3 253.2,64.3 253.2,84.5 88.3,84.5 88.3,393.1 516.8,393.1 516.8,84.5 "/>
<polygon class="terrace" points="57.8,10.3 71,10.3 235.3,10.3 235.3,67.8 71,67.8 71,164.7 51.1,164.7 51.1,311
13.1,311 13.1,164.7 13.1,162.7 13.1,10.3 "/>
</a>
<a xlink:href="#" data-floor_flat_nr="2">
<polygon points="456.8,773.8 219.9,773.8 219.7,615 147.8,615.5 147.8,404.3 517.5,404.3 517.5,479.2
456.8,478.9 "/>
<polygon class="logy" points="159,630.7 149.1,630.7 135.2,630.7 135.2,771.8 149.1,771.8 149.1,785.8 203.3,785.8
203.3,630.7 "/>
</a>
<a xlink:href="#" data-floor_flat_nr="3">
<polygon points="584.6,476 527.1,476.2 526.9,488.2 467.4,488.2 467.4,773.8 612.4,773.8 612.4,703.4
689.5,703.5 689.6,692.9 695.5,692.9 695.7,558 584.5,558 "/>
<rect x="618.5" y="703.5" class="logy" width="71.1" height="84.4"/>
</a>
</svg>
Paulie_D answer:
Put the image last? I think that's the stacking order!
yes it is
I'm trying to create an SVG sprite that can be used both as bg and as inline svg via .
The following SVG mostly works:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- symbols: used for inline SVGs via <use> -->
<symbol id="tsg-en-logo" viewBox="0 0 100 11.1">
<path fill="#0CA8D0" d="M0,2h1..."/>
</symbol>
<symbol id="chevron-down" viewBox="0 0 200 123.9">
<g fill="#0CA8D0">
<path d="M49..."/>
</g>
</symbol>
<!-- views: used for bg images -->
<view xmlns="http://www.w3.org/2000/svg" id="tsg-en-logo-bg" width="100" height="11.1" viewBox="0 0 100 11.1"/>
<view xmlns="http://www.w3.org/2000/svg" id="chevron-down-bg" width="200" height="123.9" viewBox="0 12 200 123.9"/>
<!-- uses: shown when acceses directly on the browser -->
<use xlink:href="#tsg-en-logo" x="0" y="0" width="100" height="11.1" id="u-tsg-en-logo"></use>
<use xlink:href="#chevron-down" x="0" y="12" width="200" height="123.9" id="u-chevron-down"></use>
</svg>
The problem is that when used as a BG, macOS Safari looses the proportions.
See full SVG here: https://cdn.rawgit.com/42pe/7a3a0193d3a142e7d93601340e6ee8fc/raw/81a7b0598b7179bdc071bba87569d53e2a7651e7/test.svg
And working fiddle: https://jsfiddle.net/42pe/Lragjqef/1/
Any idea why or how to fix? This works fine on Chrome, Firefox, IE11 and Edge!
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.