enter image description here
I want the color of the area to change when the mouse hovers over the area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
area:hover{
filter: opacity(0.9) drop-shadow(0 0 0 #ff0000);
}
</style>
</head>
<body>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="전국지도.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="서울 관광지" title="서울 관광지" href="" coords="140,147,139,153,143,157,148,163,157,164,165,164,172,160,174,152,169,145,165,135,159,139,153,141,149,145" shape="poly">
<area target="_blank" alt="인천 관광지" title="인천 관광지" href="" coords="121,146,121,159,122,170,125,175,133,170,135,155,131,149" shape="poly">
<area target="_blank" alt="경기 관광지" title="경기 관광지" href="" coords="115,126,128,127,128,105,140,98,147,86,156,81,156,73,174,71,181,81,186,77,187,86,198,87,205,99,217,110,209,131,237,154,229,195,214,212,185,229,170,223,141,229,139,210,140,201,125,194,117,185,140,182,130,176,120,165,120,159,123,149,117,143,115,137" shape="poly">
</map>
</body>
</html>
area 태그를 css로 선택하여 background color를 바꾸어 보았으나 실패하였습니다.
Instead of helping (trying to figure out, actually) with images and map areas I decided to show you how you can create an interactive country map with an in-document SVG.
Compared to an <img> with <map><area> an in-doc SVG will give you much more control over user interaction with the map. An SVG is essentially an XML document you can style and manipulate with all the benefits of CSS and Javascript, where an image is nothing more than a static, graphical element.
I downloaded a free SVG map of South Korea and modified it to have an interactive country map in the below snippet.
You can find plenty of SVG references online, so I won't go into specifics, but here is a summary of what I did:
Download the SVG and copy it into the main HTML document. A document in a document, hence in-doc.
Hide it from the users view by making it width="0" height="0".
Define <defs> section inside the SVG.
Define the country province <path> elements as <symbol> inside <defs> for later use (reusable elements because symbols don't show up in the viewport, they are just 'definitions').
Combined various <symbol> (provinces and specials) as new <symbol> (entire country), to be used in the main document HTML.
Defined <svg><use href="#South-Korea"></svg> in the main HTML document to show the final interactive map.
Once that has been done, you can use 'regular' CSS to control colors, line styles, hover effects, animations, etc.
I inserted an anchor <a> in the <symbol> for Seoul linking to its Wikipedia page, just to show how that is done.
It may not be the answer you wanted, but it might well be the answer you needed. Let me know...
Check out d-maps.com South Korea for more interesting SVG maps you could use.
The number of character in my answer and code exceed the maximum allowed on Stackoverflow so I have to post the link to my Codepen Demo. Sorry for that, but upside is that you can fork it and easily modify it to your needs.
snippet with only a partial country.
.country {
height: calc(100vh - 4em);
padding: 2rem;
}
svg {
display: block;
width : 100%;
height: 100%;
}
/*****************************/
/* Styling of the in-doc SVG */
/*****************************/
path { fill: #f5f5f5; stroke: #000; stroke-width: 2px }
path:hover { fill: #ff0000; filter: opacity(90%)/* url(#dropshadow)*/ }
circle { fill: blue; stroke: red; stroke-width: 4 }
circle:hover { fill: red; stroke: blue }
/* Seoul */
a path:hover { fill: green }
/***********************/
/* DEMO page eye-candy */
/***********************/
* { box-sizing: border-box }
body {
margin: 0;
width: 100%; min-height: 100vh;
background-color: #ddd;
}
h3 {
margin: 0;
padding: 1em;
background-color: black; color: white;
text-align: center;
}
<h3>Showing usage of an in-doc SVG country (parts) map</h3>
<div class="country">
<svg><use href="#South-Korea"></use></svg>
</div>
<!--
In document SVG, hidden from view because of width/height=0
Various <path> define the country/province outlines
<symbol><use> combines various <symbol> into collections
<svg><use> In <body> shows the selected <symbol>
-->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--
Copyright (c) 2017 Pareto Softare, LLC DBA Simplemaps.com
Free for Commercial Use, full terms at http://simplemaps.com/resources/svg-license
Attribution is appreciated! http://simplemaps.com
map downloaded from: https://simplemaps.com/resources/svg-kr
-->
<style>
/* All styling is done in the document main CSS section */
</style>
<defs>
<filter id="dropshadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<!-- Define Province/Islands symbols that make up the entire country -->
<symbol viewbox="0 0 1000 1064" id="KOR2496" name="Gangwon"><path d="M762 402.5l-1.6-0.1-5.3-1.2-5.1 2.3-10.9-4.1 1.7-4.7-0.5-4.4-1.4-4.9-0.4-5.5 2.1-5.3 1.7-4.9-1.2-1.5-1.4-1.3 0.7-4.5-11.6-0.9-3.4-1.9-3.7-1.6-1.5-3.6-1.1-4.2-5.2-2.5-3.3-4.9-0.7-6.5 1.1-4.9 2.7-2 3-1.1 4.6 1.8 3.8-2.8-1.6-4.6-4.9-3-5.4-1.2-4.3 2.2-4.2 1.1-5.8-2.7-6.2-1-2.1 0.8-1.7-0.2-1.4-1.8-1.9-0.8-4.5 3.5-4.7 1.9-0.4-3.5 0.4-3.4-2.8-1.4-3-0.7-2.2-3.9-4.4-0.4-4.3 2.1-2.8 3.5 1 4.9-0.5 4.5-0.9 4.2-4.1-0.3-4.7-1.1-3.9-1.6-4.1-2.2-3.1-2-3.2-1.4-4.1-0.5-4.1-0.8-4.2-2.7-3.7-2.9-3.8 0.1-3.8 1.2-3.4 0.6-2.9 0.2-1.1-2.6-3.2-3.3 0.3-2.8-1.6-1.7-7.5 0.8-4.8 1.6-1.4 0.7-1.5 0-2.2-1.3-1.7-1.9 2.7-4.2 4.6-3.3 1.8-4.2-2.9-0.8-9-1.5-8.8-3.1-3.7 2.8-3.1 1.7-3.8-0.8-3.2 2.4-5.2 3-5.2 1.2-2-2.7 0-4.3-6-6.4-8.1 2.7-3 3.7 0.9 9.7-3.2 2.2-1.1 1.3-1.2 1.1-2.7-1.5-4.8-0.4-4.9 1.2 1.4-9.6-16.8 2.3-16.7 4.6 8.5-15.9 7.1-17.4 9.7-20.8 1.2-4.5-0.9-4.5 2.1-3.6 2.9-3.6 3.2-1.3 1.6-3.5-1.8-3.1-2.3-2-3.8-0.4-3.9-1.5-5.3-0.7-8.9-4.9-4-1.7-4-2.6-4.3-0.7-4.3 1.4-3.5-3 0.3-3.3 1.7-3.4 0.6-3.9 0.1-4.1-4.2 1.4-1.9-2.4 4.6-5.5-0.8-3.6-1.2-3.6 0.9-2.7-0.1-3.3-0.3-3.1 8.1-5.9 3.2-1.1 1.8-2.8 0.8-8.1-3.7-5.8-3.1-0.6-2.9-1.3-2.2-6-3.5-0.1-3.8 0.2-4-3-2-5.3-0.8-9.5-1.5-4.7-1.1-1-1.2 0.3-0.9 0.8-1 0.1-2.7-1.9-6.6 2.3-6.1-1.4-2.4-1.5-2.5-2.3-0.1-3.8 1.2-3.6 1.6-2.6-1.1-0.9-1.3-0.3-1.3 0.2-1.1 0.9-2.1 2.7-2.4 2.4-3.6 0.6-3.1-2.1-0.6-2-0.3-2-1.1-0.7-1.2 1.3-0.4 2-0.1 6.6-2 3.3-5.8-2.8-5.3-4.8-1.9-2-2 0.3-1.7-2.6-1.1-3.3-1.5-1.7-1.7-1.4-1.3-3.2-7.9-5-3.2-1.6 1-1.1 8.6-7.2 10.1-6.3 10.6-4.4 10.2-1.1 5.1 0.6 19.5-1.7 15 4.5 4.8-0.4 9.3-2.8 30.5-2.7 1.3 0.9 2 2.9 1.9 2 2.2 0.5 10.5-2.2 16.6 1 10.8-0.9 10.8-3.8 10.1-6.6 8.4-8.8 3.7-5.3 3.1-5.6 2-6.3 0.7-7.1-1.3-7-0.4-3.5 1-2.6 4.3-3.4 9-4.7 12.1 24 1.5 6.4 3.7 9.7 14 27.7 10.9 29.1 1.8 3.1 5.6 7.1 2.2 5.9 26.4 37.8 10.2 14.9 12.3 13.6 1.7 1.4 8.2 9.7 0.5 4.1 0 4.9 1 4.2 5.6 3.1 1.6 3.4 4.6 15.1 2.1 3.4 2.5 1.5 2 2.2 7.2 14.2 4.4 5.4 1.5 3 0.5 3.2 1.1 3.1 7.7 8.4 2.4 6.9 2.2 15.1 2.9 8.2 8.2 11.4 0.6 2.3-1 2.3-1.4 2.2-1 2.2 0 1.9 1.1 6.2 1.4 17.7 1.5 8.2 5.2 16.6 0.5 8.2-1.7 7.5-3.5 6.9-2.9 8.1z"><title>Gangwon</title></path></symbol>
<symbol viewbox="0 0 1000 1064" id="KOR2497" name="Seoul">
<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Seoul">
<path d="M398.4 211.4l-1.5 5.7 4.4-0.1 3.7-1.3 3.2-0.1 1.2 2.9-0.4 3-2.2 1.1-2.4 1.6 0 3.6 1.3 1.5-2.7 3.7-1.5 2.6-4.1 2.4-4.5 1.1-4.7 2.3-1.8-4.1-3.9 0.9-4 1.2-2.7 1.6-2.9 0.5-6.8-0.3-4.7-6.1-4.6-1.4-3.1-2-0.8-5.8-3.2-4.4-3.7-4.6 2.3-5.1 4.5 0.2 5 3.1 3.8-1.2 3.4-2.1 0.2-3.4 0.9-3.2 7.1-0.7 3.7-4.6 2.2-4.8 3.2-3.3 4.9-1.2 5.7 0.4 2.7 4.7 1.1 6.4 1.6 4.4 0.1 4.9z">
<title>Seoul (links to info at Wikipedia)</title>
</path>
</a>
</symbol>
<symbol viewbox="0 0 1000 1064" id="KOR2498" name="Gyeonggi"><path d="M245.6 280.6l-0.7 1.2-2 2.1-1.4 0.6-1.9 0.3-1.6-0.7-1.4-2.9-1.5 0.8-0.7-0.2 0.5-4 0.9-2.7 1.1-1.6 1.3 0.9 1.1 1.9 1.2 0.9 3.9 2.1 1.2 1.3z m50.4-1.9l-1.3 1.6-1.8 0.4-1.2-0.9-1.3 0.1-1.1-0.6-0.3-2.5 0.3-2.6 1.3-1.8 2.8-1.5 3.6 0.3 1.6 1.1 0.6 2.4-0.7 0.9-1.7 0.5-0.6 1.3-0.2 1.3z m15.2-7.5l0.6 1.6 1.9 1.1 3 1.2 0.8 0.9 0.8 2.6-0.8 1.8-8.1 6.5-3.7 0.4 0.1-1 1.7-2.3 0.2-1.4-0.7-1.1 2-2.4 0.1-2.4-0.8-2.9-1.2-2-1.2-1.4 0.4-0.4 2.6 1.3 2.2-2 0.5 0.2-0.4 1.7z m-139.3-74.8l-0.9 0.4-1.4-3.5 0.2-1.8 1.2-0.2 1.8 0.3 1.1 1.1-0.5 2.2-1.5 1.5z m107-0.9l-3.2 0.2-10.7-8.4 1.4-1.2 0.6-1.6 0.9-3.8 1.3-2 0.9-0.7 0.9-0.3 0.6 0.4 0.6 1.4 0.5 3.7 1 2 1 1.1 4.1 3.4 1.5 1.8 0.3 1.9-1.7 2.1z m-253.9-24l0.8 0.7-0.3 1-1.1 0.3-1.5-0.4-1.1 0.5-1 1.2-1.4 0.7 0.7-2.1 1.1-0.8 0.3-1.1 2.1 0.1 1.4-0.1z m239.1-6.6l3 1.8 3.1-0.1 2.9 0.5 1.5 1.6-1.1 3.6-2.8 2.4-3.4 0.3-6.6-1.5-3.3 1.6-1.5 0-0.6-2.2 0.3-0.7 1.8-5.5 2-1.9 2.2-0.6 2.5 0.7z m40 37.3l-1.8 4.2-1.6 1.4-1.2 0.2-0.9-0.5-1.7-1.8-1.2-0.7-0.8 0.3-1.3 1-8.3 0.5-3.1-1.5-3.3-4.3 4.9-1.3 1.2-0.8 1.3-2.1-0.2-0.9-0.9-0.6-0.8-1.1-5.6-10.8-0.4-1.7 0.6-2.1-0.1-9.5 0.6-2.2 1.6-0.5 3.7-4.4 2.9-0.7 2.5 1.8 2.4 2.8 2.4 2.2 5.1 2.6 2 2 0.8 3.2-0.2 1.7-0.8 2.7-0.2 1.2 0.4 1.3 1.4 2.7 0.4 1.5 0.5 7.2-0.5 1.7 0.8 1.1 1.4 3-2 1.2z m-287.2-37l-1.2 0.7-1.2-0.1-1 0.4-0.8 0.8-1-1.6-1.2-1.7 0.5-1.5 2.6-2.2 2.5-2.4 1.2 0.2 1.2 0.6 0.3 1.3-0.8 1.8-0.4 2-0.7 1.7z m2.9-34.2l1.8 2.1-0.3 3-2.2 1.6-3-1.9-4.1 0.4-0.8 0.4 0.1 2.1 1.5 0.7 1.8 0.4 0.9 0.7-3.2 2.6-6.5-0.9-4.8-4.1 1.6-7.1 4.1 1.4 8.7-3.1 4.4 1.7z m454.9 169.6l-1.1 2.1-1.3 1.9-2.5 1.9-1.7 3.2-7.6 14.1-3.9 2.8-0.9-1.2-3.1-0.6-2.5 2.6-1.3 3.3-1.9 2.5-4.1 1.7-2.5 2.8-1.5 5.8-5.2 1.8-6.8 3.3-7.1 2-7.4-1-6.1-5.1-6.9-3.1-13.1 5.6-6.2 0-7.5-1.5 2.1-1.6 2.4-1.1 1.7-1.9 1-4.8-0.3-0.9-1.7-2 0.8-0.8 1.7 0 2.2-1.3 1.4-0.2 1-0.7 0.5-2.3-9.5 2.7-1.4 2 0.5 6.1-1.2 1.4-3.7 1.2-5.2-0.7-6.2-3.6-5.6-5.6-2.2-5.3 9.5-1 0-1.2-2.1-1.5 1.7-0.2 1.7 0.1 1.6 0.5 1.3 1.1-0.6-3.8-2.2-3.4-1.6-3.8 1.2-5.3-1.8-0.8-1.4 1.8-0.8 3.2-0.3 3.2-0.8 3.5-1.5 0.8-1.5-1.5-3 0.6-3 0.8-7.3-2.2 0-2.3-0.7-1.9 0.6-2.7-0.3-3.4 1.8-3.4 2.2-3 2.5-1.2 2.7-1 4-0.1 4.3-1.2 0.9-1.3 0.3-3.7-1-0.7-2.2 1.2-3.3 2.9-2.1-0.5-1.5-0.9-0.8-1.5 0-2.4-3.7 1.9-3.1 2.2-5.6 6.1-1.5 1.2-1.8 0.6-1.7 0-1-1.1 0-1.8 1-1.8 2.3-3.3-4.6 1.1-1.4-0.5-0.6-2.7 0.9-2 1.9-1.1 2.2-0.8 1.6-0.9 1.9-2.6-0.5-0.7-4.2 0.6-1.4-0.9-1.1-2.1-1.1-2.7-1.2-2.5 0.7-0.2 1.4-1.2 1.2 0.9 1.7-0.1 3.1-0.8 2.5 0.7 2.1 1.3 2.1 0.6 2.4-1.2-0.2 2.3 0.2 2.1 0.8 1.7 1.5 0.7 1.7-0.6 0.7-1.9 0.8-4.3 2.7-4 2.2 0.4 2.5 1.5 3.5-0.6-0.8-1.6-1-1.2-1.2-0.8-1.5-0.4-2.2 0-1-1.5-2.3-0.4-1.9 0.6-1.9-0.1-3-0.6-5-1.6-6.9-5.2-0.3-2.3 3-4.5 2.1-2.1 5-1.5 3.3-2.4 2.2-4.3 1.5-5-1.5-2.4-2.6-1.7-1.7-3.9 0.1-4.7-9.4-9-15.3 0.5-2-4.7-3-5.1-1.8-1.8-0.1-2.7-0.6-4-1.7-6.3-2.3-16.5 0.6-2.7 2.1-0.4 8.7 3.2 2.8-0.6 2.3-1.1 2.1-0.4 2.1 1.4 0.8 2.4 0.3 3.6-0.2 3.8-0.9 2.6-0.1 4.7 4.9 4.1 6.2 2.6 3.8 0.2-3-3.1-9.1-6.6 2.6-7.1 0.8-4.2-0.6-3-1.5-3.1-0.3-4.1 0.7-4 1.6-3.2-1.2-1.5-1.5 0.2-2.4 1.7-1.1-17.3 0.8-4.7 1.9-1.4 3-0.4 4-1.5 6.3-5.1 13.6-20.7 2.7-2.8 6.1-4.7 2.6-3.1 5.4-13.3 1.9-2.5 3.2 1.6 7.9 5 1.3 3.2 1.7 1.4 1.5 1.7 1.1 3.3 1.7 2.6 2-0.3 1.9 2 5.3 4.8 5.8 2.8 2-3.3 0.1-6.6 0.4-2 1.2-1.3 1.1 0.7 0.3 2 0.6 2 3.1 2.1 3.6-0.6 2.4-2.4 2.1-2.7 1.1-0.9 1.3-0.2 1.3 0.3 1.1 0.9-1.6 2.6-1.2 3.6 0.1 3.8 2.5 2.3 2.4 1.5 6.1 1.4 6.6-2.3 2.7 1.9 1-0.1 0.9-0.8 1.2-0.3 1.1 1 1.5 4.7 0.8 9.5 2 5.3 4 3 3.8-0.2 3.5 0.1 2.2 6 2.9 1.3 3.1 0.6 3.7 5.8-0.8 8.1-1.8 2.8-3.2 1.1-8.1 5.9 0.3 3.1 0.1 3.3-0.9 2.7 1.2 3.6 0.8 3.6-4.6 5.5 1.9 2.4 4.2-1.4-0.1 4.1-0.6 3.9-1.7 3.4-0.3 3.3 3.5 3 4.3-1.4 4.3 0.7 4 2.6 4 1.7 8.9 4.9 5.3 0.7 3.9 1.5 3.8 0.4 2.3 2 1.8 3.1-1.6 3.5-3.2 1.3-2.9 3.6-2.1 3.6 0.9 4.5-1.2 4.5-9.7 20.8-7.1 17.4-8.5 15.9z m-76.3-89.2l-0.1-4.9-1.6-4.4-1.1-6.4-2.7-4.7-5.7-0.4-4.9 1.2-3.2 3.3-2.2 4.8-3.7 4.6-7.1 0.7-0.9 3.2-0.2 3.4-3.4 2.1-3.8 1.2-5-3.1-4.5-0.2-2.3 5.1 3.7 4.6 3.2 4.4 0.8 5.8 3.1 2 4.6 1.4 4.7 6.1 6.8 0.3 2.9-0.5 2.7-1.6 4-1.2 3.9-0.9 1.8 4.1 4.7-2.3 4.5-1.1 4.1-2.4 1.5-2.6 2.7-3.7-1.3-1.5 0-3.6 2.4-1.6 2.2-1.1 0.4-3-1.2-2.9-3.2 0.1-3.7 1.3-4.4 0.1 1.5-5.7z"><title>Gyeonggi</title></path></symbol>
<!-- Define cities, villages, locations, water, roads etc -->
<symbol id="symbol-south-korea-specials" viewbox="0 0 1000 1064">
<!-- Not sure what these are for. Cities, capitals? -->
<circle r="15" cx="382.7" cy="319.5" id="0"><title>some city 1</title></circle>
<circle r="15" cx="449.5" cy="323.2" id="1"><title>some city 2</title></circle>
</symbol>
<!-- Construct the country from <symbol> definitions -->
<symbol id="symbol-south-korea">
<use href="#KOR2496"></use>
<use href="#KOR2497"></use>
<use href="#KOR2498"></use>
</symbol>
<symbol id="South-Korea">
<use href="#symbol-south-korea"></use>
<use href="#symbol-south-korea-specials"></use>
</symbol>
</defs>
</svg>
I am using svg icons for my webpage and when i put them inside a hyperlink tag "" a hyphen appears on the right side of the icon.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div style="text-align:center;">
<div class="row border-top py-4 text-center">
<div class="col mb-4">
<a class="link-dark ms-3 me-3" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="40" fill="#212529" viewBox="0 0 448 512">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</a>
<a class="link-dark ms-3 me-3" href="https://github.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#212529" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
</a>
<a class="link-dark ms-3 me-3" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#212529" viewBox="0 0 512 512">
<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
</svg>
</a>
</div>
how it looks
As you can see in the image i can even highligth the hyphen as if it was text.
I tried using other tags like button and they work just fine, so it only happens when i use hyperlink, i would like to know if there is a way to fix it so i can keep using the hyperlink tag or if i have to use button instead.
Apparently in the stack overflow code snippet it doesn't happen :/ maybe it is because i'm using bootsrap?
It could be an underlined whitespace. Try this css rule:
a.link-dark {
text-decoration:none;
font-size:0;
}
You can either set the font size to 0, remove them in the html, or use css flexbox. Just as you like.
I am using Angular 5.2.0 and Inkscape. I am just trying to get an inline SVG in my template so I can put some transitions on it. When I am not within angular this SVG renders fine, however, I have been unsuccessful getting the SVG to render in Angular.
So far I have tried minimizing the number of svg specific tags so I can avoid this problem, however, it seems the ones I have are all required to properly render the image (left the version below uncut).
I have also tried putting the svg: prefix in front of every tag within the SVG in hopes Angular will recognize it. I suspect this would work if it had not been for the other prefixes already on the tags.
SNIPPET:
https://stackblitz.com/edit/angular-wmhj27?file=app%2Fapp.component.html
Any tips/suggestions welcome.
I have gotten rid of all other possible error factors so I just have my svg within the component template:
<svg width="297mm"
height="91mm"
version="1.1"
viewBox="0 0 297 91"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:defs>
<svg:linearGradient id="linearGradient3880"
x1="65.8"
x2="276"
y1="188"
y2="173"
gradientUnits="userSpaceOnUse">
<svg:stop offset="0" />
<svg:stop stop-opacity="0"
offset="1" />
</svg:linearGradient>
</svg:defs>
<svg:metadata>
<svg:rdf:RDF>
<svg:cc:Work rdf:about="">
<svg:dc:format>image/svg+xml</dc:format>
<svg:dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<svg:dc:title/>
</svg:cc:Work>
</svg:rdf:RDF>
</svg:metadata>
<svg:g transform="translate(18.1 -119)">
<svg:path d="m269 162c9e-3 -0.707 0.183-1.5 0.624-2.28 0.632-1.09 1.78-2.08 3.39-2.41v-1e-5c1.36-0.26 2.92-4e-3 4.26 1.01 1.17 0.904 2.03 2.31 2.16 4.03 0.0612 0.955-0.0915 1.91-0.462 2.79-0.349 0.833-0.841 1.59-1.45 2.23-1.15 1.19-2.51 2.03-3.9 2.58-2.61 1.09-5.39 1.62-7.82 2.37-2.04 0.736-4.16 1.6-4.96 2.98-0.694 0.861-1.01 2.21-1.23 3.81-0.181 1.56-0.0605 3.26-0.039 5.43 0.0601 2-0.0229 4.36-0.688 6.93-0.62 2.52-2.14 5.1-4.77 7.07-1.61 1.11-3.46 1.78-5.4 1.95h-2e-5c-1.88 0.162-3.76-0.105-5.51-0.787-3.36-1.37-6.02-3.91-7.52-7.1-1.42-3.01-1.96-6.26-1.72-9.38 0.215-3 0.927-5.81 1.89-8.39 1.78-4.93 4.19-9.08 5-13 0.388-1.84 0.576-3.62 0.26-5.1-0.312-1.4-0.874-2.73-1.7-3.39-0.868-0.935-2.67-1.39-4.27-1.27-1.64 0.102-3.44 1.08-4.95 2.43-1.5 1.35-2.66 3.35-3.56 5.59-0.881 2.23-1.36 4.81-1.7 7.61-0.624 5.48-0.434 11.9-1.95 19.1-0.75 3.52-2.09 7.15-4.26 10.6-2.16 3.42-5.32 6.42-9.36 8.39-5.97 2.68-12.6 2.58-18.3 0.0831-5.53-2.44-9.93-6.53-12.9-11.4l-2e-5 -2e-5c-5.61-9.56-6.66-20-6.78-29.3-0.478-9.14-0.402-17.7-3.71-24.1-1.27-2.56-2.89-4.89-4.84-6.54-0.477-0.404-0.972-0.768-1.49-1.08-2.56-1.58-5.7-2.42-8.16-1.78-2.58 0.379-5.18 2.55-7.3 5.13-2.16 2.71-3.61 6.4-5.02 10.4l-1e-5 1e-5c-1.39 4.13-2.57 8.54-4.46 13.2-1.86 4.79-4.69 9.55-8.9 13.5-6.75 5.89-15.3 8.17-23.1 7.82-8.07-0.327-15.4-2.7-21.8-5.45-6.79-2.87-12.8-6.02-18.6-8.25-6.34-2.38-12.3-3.88-17.9-3.46-5.84 0.301-11.5 2.64-16.3 5.51-5.47 3.28-10.3 7.75-14.4 11.8-13.5 13.6-23.7 23.5-29.3 26.4-2.56 1.29-3.87 1.51-3.88 1.08-0.01-0.408 0.917-1.3 2.63-2.89 4.44-4.11 12.3-14.2 25.4-29.4 3.89-4.55 8.85-9.71 15-14 5.42-3.76 12.2-6.93 20.1-7.83 7.51-0.739 15 0.636 22.2 3.19 6.61 2.29 12.9 5.3 19.2 7.73 5.91 2.22 12 4.13 17.9 4.08 5.52-0.0871 11.3-1.57 14.8-5.11 2.41-2.16 4.13-5.48 5.67-9.22 1.46-3.71 2.52-8 4.01-12.6l1e-5 -2e-5c1.41-4.56 3.43-9.45 6.74-14 3.29-4.62 8.32-8.42 14.6-9.98 6.34-1.29 12.7 0.0889 17.8 3.43 3.63 2.39 6.58 5.47 8.81 8.9 0.828 1.27 1.56 2.6 2.19 3.95 4.48 9.95 4.82 20.2 4.96 29.1 0.503 8.94 0.853 17.3 4.75 23.1l1e-5 1e-5c1.86 2.91 4.3 5.37 7.05 6.49 2.68 1.1 5.89 1.33 8.07 0.212 1.6-0.653 3.1-2.13 4.32-3.86 1.24-1.79 2.08-4.08 2.71-6.57 1.31-5.09 1.18-11.2 2.09-17.9 0.445-3.41 1.24-6.94 2.64-10.4 1.42-3.57 3.66-6.95 6.71-9.72 3.15-2.87 7.24-4.7 11.7-5.07 4.67-0.367 9.29 1.29 12.8 4.67 2.64 2.78 4.11 6.13 4.53 9.44 0.432 3.35 0.0796 6.5-0.713 9.28-1.65 5.76-4.31 10.1-5.9 13.9-0.807 2.02-1.42 3.89-1.59 5.64-0.159 1.79-0.0423 3.48 0.551 4.78 0.595 1.3 1.54 2.46 2.56 2.87 0.524 0.24 1.09 0.38 1.59 0.366h1e-5c0.504-0.0109 1.02-0.134 1.39-0.357 0.7-0.269 1.3-1.32 1.79-2.47 0.492-1.26 0.609-2.95 0.733-4.75 0.0907-1.97 0.136-4.05 0.533-6.36 0.383-2.46 1.4-4.92 3.14-7.01 2.68-2.85 5.94-4.06 8.63-4.55 3.03-0.655 5.52-0.817 7.5-1.44 1.02-0.342 1.83-0.642 2.36-1.11 0.284-0.235 0.519-0.478 0.668-0.726 0.155-0.257 0.265-0.522 0.29-0.753 0.071-0.384-0.0964-0.893-0.355-1.2-0.289-0.366-0.841-0.604-1.3-0.619-0.561-0.0333-1.17 0.257-1.54 0.631-0.503 0.492-0.71 1.25-0.696 1.83"
fill="url(#linearGradient3880)"
stroke="#000"
stroke-width=".265px" />
</svg:g>
</svg>
My resources:
https://500tech.com/blog/all/svg-in-angular-2/
https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components
https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
Seems the main problem here is that angular can't recognize tags inside svg metadata tag such as rdf:RDF, cc:Work etc.
So if you remove them all should work as expected.
<metadata>
</metadata>
Stackblitz Example
To be very, very clear:
If you copy-paste this code, it will work in a Chrome browser. The issue lies when you put a map.svg containing the nested <symbol>'s and access the resource with external loading like so:
<svg role="img" title="Python" class="icon">
<use xlink:href="public/img/map.svg#python" />
</svg>
Here's the code that's in a <section>
<div class="row">
<svg role="img" title="Python" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#python" /></svg>
<svg role="img" title="C" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#c" /></svg>
<svg role="img" title="C++" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#cpp" /></svg>
<svg role="img" title="Swift" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#swift" /></svg>
</div>
If you notice, I'm referencing an SVG map file with <symbol id="relevant-id"> for each SVG path. I was able to get
.icon:hover {
fill: red;
}
working as you would expect in Chrome, but I had the SVG map referenced at the bottom of index.html instead of in a separate directory. So, when working to solve this problem, please be certain to make sure your xlink:href points to the correct location.
Here's the SVG map:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="c" viewBox="0 0 1000 1000">
<title>C</title>
<path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/>
</symbol>
<symbol id="cpp" viewBox="0 0 1000 1000">
<title>C++</title>
<path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M736.5 453h-30.4v32.4h-32.4v30.2h32.5V548h30.4v-32.3h32.2v-30.2h-32.3V453z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/><path d="M849.9 453.1h-30.1v32.4h-32.4v30.1h32.5V548h30.2v-32.4h32.4v-30.3H850c-.1-10.9-.1-21.5-.1-32.2z"/>
</symbol>
<symbol id="python" viewBox="0 0 1000 1000">
<title>Python</title>
<path d="M619 858.9c20.7 0 37.3-16.7 37.3-37.2 0-20.5-16.8-37.1-37.2-37.1-20.6 0-37.1 16.6-37.1 37.1-.1 20.7 16.4 37.2 37 37.2zM384.8 140.4c-20.8 0-37.3 16.5-37.3 37.1s16.6 37.2 37.1 37.2c20.6 0 37.2-16.6 37.3-37 .1-20.6-16.5-37.3-37.1-37.3z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM268.3 607.5c-.3 33.2-.1 66.5 0 99.8 0 1.9-.4 2.3-2.3 2.3-23.1-.1-46.1-.1-69.2 0-13.2.1-25.6-2.9-37.4-8.3-19.7-8.9-34.8-23.1-46.9-40.8-12.9-18.9-21-39.9-26.7-61.9-7.9-31-10.6-62.7-11-94.6v-10.2c0-3.6.1-7.2.3-10.8.5-17.2 2-34.2 4.8-51.2 3.1-18.7 7.9-36.9 15.4-54.4 8.8-20.8 20.8-39.4 38.1-54.1 18.1-15.5 38.9-24.5 62.4-27.4 7.5-.9 15-.5 22.5-.4 19.8.1 39.6 0 59.3 0H500c2 0 2.7-.5 2.6-2.6-.1-8 0-16.1-.1-24 0-3.1.3-2.7-2.7-2.7H298c-1.9 0-2.5-.4-2.5-2.4v-55.7c0-12.9.1-25.7-.1-38.5-.1-5.1.1-10.1 1.3-15.2 3.4-14.4 11.4-25.9 22.3-35.6 11.6-10.5 25.3-17.9 39.9-23.6 21.8-8.5 44.5-13.3 67.6-16.3 21-2.7 42.1-3.8 63.2-4.2h19.6c8.8.4 17.7.7 26.5 1.1 7.7.4 15.4 1.3 23 2.1 4 .4 8 .8 11.9 1.4 5.6.8 11.2 1.8 16.9 2.9 9.8 1.9 19.5 4 29 6.9 9.6 2.9 19.1 6.3 28.2 10.5 13 6.1 25 13.6 35.4 23.3 12.3 11.4 21.2 25.2 25.5 41.7 2.2 8.3 2.2 16.8 2.1 25.3-.2 61.1-.1 122.4-.1 183.5 0 9.8-.6 19.7-2.6 29.4-5.4 27-19.1 48.6-42.4 63.6-21.6 13.9-45.6 20.2-71 20.3-67.5.3-135 .1-202.5.1-12.8 0-25.3.9-37.8 3.9-25.7 6.2-46.7 19.5-61.4 41.7-15 22.8-21.5 48.1-21.7 75.1zm657.4-51.1c-.1.5-.3.9-.4 1.4-1.5 11.1-3.6 22.2-6.4 33.1-6.1 23.6-15.2 45.9-30 65.4-19.4 25.4-44.7 41.2-76.3 46.4-8.3 1.4-16.7 1.1-25 1.1-55.5-.2-111-.1-166.6-.1-39.1 0-78.1 0-117.2-.1-2.2 0-2.7.6-2.7 2.7.1 7.8.1 15.6.1 23.4 0 3.2 0 3.2 3.3 3.2 67 0 134 0 201-.1 2 0 2.6.5 2.6 2.5-.1 8.5.1 17.2.1 25.7.1 24.1.2 48.2.2 72.3 0 2.8-.2 5.6-.7 8.4-2.5 13.3-9 24.3-18.3 33.9-11.8 12.3-26.4 20.7-42.1 27.1-25.5 10.4-52.2 15.4-79.4 18.4-13.8 1.5-27.5 2.3-41.4 2.7-24.1.7-48.2.3-72.2-1.8-10.6-.9-21.3-2.2-31.8-4-14.1-2.4-27.9-5.6-41.5-10.1-19.4-6.4-37.7-15-53.3-28.3-14.8-12.6-25.4-27.7-30-46.8-2-8.1-1.8-16.4-1.7-24.7.2-60.9.1-122 .1-182.9 0-10.8.7-21.5 3.1-32.1 6.5-28.9 22.6-50.7 48.7-64.9 20.1-10.9 41.8-16.2 64.5-16.3 67.8-.2 135.5-.1 203.3-.1 13.5 0 26.7-1.3 39.8-4.8 21.3-5.7 39.4-16.6 53.2-33.9 18.2-22.9 26.3-49.6 26.9-78.4.7-34.3.2-68.7.1-102.9 0-2.1.5-2.6 2.6-2.6 23.1.1 46.2.1 69.4 0 11.7 0 22.9 2.5 33.7 6.9 19.8 8.1 35.2 21.7 47.8 38.8 11.3 15.5 18.8 32.8 24.9 50.9 4.5 13.6 7.5 27.6 9.8 41.8.7 4.4 1.4 8.7 2.1 13.2-.3 38.7-.3 77.2-.3 115.6z"/>
</symbol>
<symbol id="swift" viewBox="0 0 1000 1000">
<title>Swift</title>
<path d="M499 487.2h.3c-.1-.1-.2-.1-.2-.2-.1 0-.1.1-.1.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zm20.8 854c-.7 5.2-1.6 10.4-3.8 15.3-.9 1.9-1.7 4.3-4.1 4.4-2.4.1-3-2.3-3.9-4-9.4-18-21.2-34-37.3-46.6-15.5-12-33-19-52.4-21.6-19.3-2.5-38.2-.5-57 3.7-16.1 3.6-31.6 8.9-46.6 15.6-6.7 2.9-13 6.8-19.5 10.1-22.4 11.1-45.7 19.5-70 25.4-16.6 4-33.2 7-50.2 8.8-20.4 2.1-40.8 2.7-61.2 1.9-26.8-1.1-53.3-4.6-79.5-10.3-40.8-8.8-79.8-22.7-117.4-40.6-39.5-18.8-76.2-42-110.4-69.2-14-11-27.3-22.8-40.3-35-6.3-5.9-12.6-12-18.5-18.3-26.7-28-50.5-58-71.2-90.7-.3-.5-.5-1-.8-1.5l.2-.2c10 8 20.3 15.6 31 22.6 16.3 10.5 33.1 19.8 50.4 28.6 9.2 4.7 18.7 9 28.1 13.3 7.6 3.4 15.4 6.4 23.2 9.4 9.5 3.7 19.3 7.1 29 10.2 10.7 3.4 21.7 6.4 32.6 9.1 9 2.2 18.1 4.1 27.1 5.9 5.6 1.1 11.2 2 17 2.6 4.9.5 9.7 1.7 14.6 2.1 3.5.3 7.1.6 10.6 1 4.9.5 9.9 1 14.9 1.1 9.6.2 19.4.7 29 .4 12.4-.3 24.9-1 37.2-2.4 13.8-1.6 27.4-3.9 41-7 32.8-7.6 63.8-19.8 92.6-37.1.7-.4 1.3-.8 2-1.2.2-.1.3-.3.6-.5-4-3.1-8-6.2-12-9.4-7.8-6.2-15.7-12.6-23.5-18.9-1.6-1.3-3.1-2.6-4.7-3.9-11.4-9.2-22.5-19-33.5-28.7-39.8-35.1-77.6-72.4-114-111-7.8-8.3-15.6-16.6-23.3-25-7.6-8.3-15.3-16.9-22.8-25.3-6-6.7-11.9-13.6-17.8-20.4-28.3-33-56-66.5-82.9-100.7-6.3-8-12.3-16.2-18.9-24-5.5-6.6-11.6-12.8-16.9-19.6-10.8-14-20.3-28.9-30-43.6-.1-.2-.1-.4-.2-.5 2 .9 3.4 2.6 4.9 4.1 34.4 31 70.2 60.5 106.4 89.4 38.7 30.7 78.1 60.5 118 89.6 9 6.6 18.2 13.2 27.4 19.6 5.3 3.8 10.6 7.6 16.1 11.3 12.8 8.6 25.6 17.2 38.5 25.8 9.5 6.3 19.2 12.3 29 18.2.5.3.9.9 1.6.6-3.5-3.9-7-7.7-10.6-11.5-15.1-16.2-29.7-32.6-44.3-49.4-27-31.1-53.2-63-78.7-95.4-35.7-45.6-70.5-91.9-103.2-139.8-1-1.5-1.9-3-2.8-4.5l.3-.3c2.9 2.9 5.9 5.7 8.8 8.6 33.8 33.7 68.6 66.6 104.3 98.4 36.5 32.5 73.9 64.1 112.2 94.5 22.3 17.7 44.8 34.8 67.6 51.9 12.4 9.4 25.2 18.6 37.9 27.6 9.6 6.8 19.4 13.7 29.2 20.3 17 11.3 33.9 22.6 51.5 33 1.1.7 1.4.6 1.9-.6 7.3-19 12.8-38.5 16.5-58.4 1.8-9.7 3.2-19.5 4.1-29.3 1.7-18.2 2.1-36.3 1.1-54.5-3.7-68.7-24.2-132.5-56-193.1-12.1-23.2-26-45.3-41.4-66.5-.4-.5-.7-1-1.2-1.7.9-.2 1.4.4 1.9.7 36.6 22.5 70.5 48.5 101.5 78.2 50 48 90.8 102.7 120.8 165.4 5.5 11.4 10.6 23.1 15.1 35 2.9 7.9 5.7 15.9 8.4 23.8 6 17.8 10.6 35.9 14.2 54.4 3.1 16.3 5.2 32.7 6.3 49.3 1.1 16.8 1.1 33.4-.1 50.2-1.1 15.4-3.2 30.5-6.5 45.6-.6 2.5-.8 5.2-2.1 7.5 0 2.9-1 5.5-1.8 8.2-1.1 4.1-1.8 8.3-3.5 12.2-.3.8.1 1.1.5 1.6 24.4 30.2 43.3 63.6 55.8 100.3 6.6 19.5 11.2 39.6 13.6 60 1.8 15.3 2.3 30.4.3 45.4z"/>
</symbol>
</svg>
CSS you'd need to get it working:
Bootstrap 3.3.7 CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
.icon {
fill: black;
}
Lastly, here's a CodePen:
https://codepen.io/kylemh/pen/ZeBKYG
TO REITERATE, THE CODEPEN WORKS BECAUSE THE SVG MAP IS IN INDEX.HTML
I checked it out in Chrome on Mac and didn't see any strange behavior.
Are you certain that you don't have any extensions interfering?
<div data-role="content">
<div id="skeletonsmall">
<center>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="262px" height="644px" viewBox="128 65.25 262 644" enable-background="new 128 65.25 262 644" xml:space="preserve">
<a xlink:href="#skull">
<path id="skull" opacity="0.5" fill="#5CCAE8" enable-background="new " d="M237.026 122.5 c1.92 7.2 3.3 7.6 3 10.028c-0.341 2.388-0.375 10.5 10.1 11.58c10.522 1.1 22.9 1.6 26.282-5.134 c0 0 1.338-8.834 2.817-10.267c1.479-1.433 0.765-4.775 1.958-6.208c1.192-1.433 3.485-23.877-1.958-32.233 c-5.444-8.357-7.435-12.655-21.124-12.655c-13.69 0-19.059 8.118-20.193 10.028c-1.137 1.91-1.455 5.253-2.251 6.5 c-0.795 1.273-1.113 6.048-1.272 7.958c-0.16 1.9 0 14.5 0.8 16.873C236.002 121.4 237 122.5 237 122.477z"/></a>
<g id="humerus">
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M190.635 197.309c-2.093-5.987-1.962-8.47-0.813-10.126 c1.147-1.655 0.957-1.908 3.312-2.478c2.356-0.57 3.695-1.97 5.67-1.458c1.973 0.5 3.3 0.7 5.6 3.8 c2.289 3.1 0.8 5.3 0.8 5.35s-2.737 0.059-3.824 2.86c-1.086 2.8-2.602 43.292-3.114 45.3 c-0.512 1.973-3.397 17.25-3.02 20.943c0.378 3.7 4.7 19.6 4.8 21.845c0.124 2.3 1.5 5.67-3.638 6.3 c0 0 0.7 2.516-1.503 2.243c-2.192-0.273-4.356-1.041-6.52-1.808c-2.163-0.767-7.004-0.327-6.808-3.256 c0.194-2.929-0.565-5.54 2.876-8.911c3.442-3.371 5.869-32.016 6.592-37.428S190.635 197.3 190.6 197.309z"/>
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M326.388 196.912c2.059-5.999 1.914-8.481 0.758-10.129 c-1.158-1.647-0.97-1.903-3.329-2.46c-2.359-0.556-3.706-1.948-5.678-1.424c-1.97 0.524-3.307 0.724-5.577 3.8 c-2.27 3.072-0.788 5.354-0.788 5.354s2.738 0 3.8 2.838c1.102 2.8 2.9 43.3 3.4 45.2 c0.524 2 3.5 17.2 3.1 20.926c-0.356 3.697-4.573 19.58-4.686 21.873c-0.111 2.293-1.424 5.7 3.7 6.3 c0 0-0.675 2.5 1.5 2.234c2.191-0.286 4.35-1.065 6.511-1.843c2.156-0.781 7.001-0.369 6.79-3.296 c-0.213-2.927 0.533-5.542-2.929-8.895c-3.462-3.35-6.054-31.981-6.808-37.389C325.444 234.6 326.4 196.9 326.4 196.912z"/>
</g>
I can't seem to figure out why my code isn't working! I'm trying to use xlink to let my path (id skull) lead to the skull page. I'm sure this is some moronic coding error I'm making, but PLEASE HELP!
Your path has id="skull" and you link to it, in other words: if you click the link you just go to where you already are. Try replacing xlink:href="#skull" with e.g xlink:href="http://example.com" to test.
In general, it's not a good idea to have several elements with the same id in the same document.