SVG <text> element inside <a> element no underline in IE - html

Please check this plunker:
https://plnkr.co/edit/jqPx9qpN3W1Jrix2axPw?p=preview
<div width="100px">
<svg width="100px" viewBox="0 0 100 100">
<a xlink:href="#" class="node">
<text transform="translate(50 50)">hh2</text>
</a>
</svg>
</div>
a:hover {
text-decoration: underline;
}
On chrome you will see an underline on hover, but on IE there is no underline. I tried solving with css without success.


In SVG text-underline behaves a little differently than in HTML.
In SVG, the specification states that it shouldn't inherit.
It appears Chrome and FF have relaxed that restriction.
To get around this in IE, just alter the CSS rule to include the text element.
a:focus text, a:hover text {
color: #23527c;
text-decoration: underline;
}
<h1>Hello Plunker!</h1>
<div width="100px">
<svg width="100px" viewBox="0 0 100 100">
<a xlink:href="#" class="node">
<text transform="translate(50 50)">hh2</text>
</a>
</svg>
</div>

Related

I would like to put an image inside svg shape and hide the overflow parts

.container{
position: relative;
width: 692px;
}
.image{
position: absolute;
width: 403px;
height: 602px;
top: 91px;
left: 92px;
}
<html>
<body>
<div class="container">
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z"
fill="green"/>
</svg>
<div class="image">
<img src="https://dummyimage.com/403x602/000/efefef" width={403} height={602}/>
</div>
</div>
</body>
</html>
Please don't mind the white background of image.
As you can see, I would like to remove the bottom-right overflow parts. The green area is the svg. I tried with z-index and svg clip-path. Unfortunately those methods didn't work for me somehow. Help is much appreciated. Thanks.

As I've told you in the comment: you can put the image inside the svg and clip the image with the path.
<svg width="581" height="692" viewBox="0 0 581 692" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="thePath" d="M526.636 489.523C598.467 361.569 590.666 251.284 551.879 107.757C538.582 58.5517 506.556 -37.4658 444.069 -103.204C320.276 -233.438 122.218 -189.737 6.51981 -180.688C-109.178 -171.639 -138.103 -67.5724 -164.924 3.12491C-191.745 73.8223 -123.378 416.563 -84.461 503.097L-84.2626 503.538C-45.3885 589.978 0.49324 692 167.445 692C334.682 692 444.781 635.333 526.636 489.523Z" fill="green" />
<clipPath id="cp">
<use href="#thePath" />
</clipPath>
<image clip-path="url(#cp)" href="https://dummyimage.com/403x602/000/efefef" width="403" x="100" y="100" />
</svg>

How do I use responsive svgs in this context?

.contained {
width: 80%;
max-width: 2500px;
margin: 0 auto;
}
#media all and (max-width: 780px) {
.icon-text-size {
display: inline
}
}
.svg-align {
vertical-align: middle;
}
.icon-fix {
display: none;
}
<div class="contained">
<h2 class="title"><span>Contact</span> Us</h2>
<h1 class="icon-text-size">
<svg class="svg-align" width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M91.4849 96.6599L101.565 86.5799C102.923 85.2391 104.64 84.3213 106.509 83.9379C108.379 83.5544 110.319 83.7219 112.095 84.4199L124.38 89.3249C126.174 90.0534 127.713 91.2968 128.802 92.8984C129.892 94.5 130.482 96.3882 130.5 98.3249V120.825C130.489 122.142 130.212 123.444 129.686 124.652C129.159 125.86 128.393 126.948 127.435 127.852C126.476 128.756 125.344 129.456 124.108 129.912C122.871 130.367 121.556 130.567 120.24 130.5C34.1549 125.145 16.7849 52.2449 13.4999 24.3449C13.3474 22.9749 13.4867 21.588 13.9087 20.2756C14.3307 18.9633 15.0257 17.7551 15.9482 16.7307C16.8706 15.7062 17.9995 14.8887 19.2606 14.3318C20.5217 13.775 21.8864 13.4915 23.2649 13.4999H44.9999C46.9394 13.5057 48.8329 14.0915 50.4367 15.1822C52.0406 16.2728 53.2815 17.8183 53.9999 19.6199L58.9049 31.9049C59.626 33.6737 59.81 35.6158 59.4338 37.4886C59.0577 39.3614 58.1381 41.0818 56.7899 42.4349L46.7099 52.5149C46.7099 52.5149 52.5149 91.7999 91.4849 96.6599Z" fill="#F62AA0"/>
</svg>
<br class="icon-fix"> 01328 633037</h1>
<h1 class="icon-text-size">
<svg class="svg-align" width="144" height="125" viewBox="0 0 144 125" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M129.32 20.8333C128.775 20.7846 128.225 20.7846 127.68 20.8333H15.6801C14.9622 20.8429 14.2492 20.9364 13.5601 21.1111L71.3601 71.0764L129.32 20.8333Z" fill="#F62AA0"/>
<path d="M135.24 22.4606L77.0002 72.8078C75.5013 74.1012 73.4737 74.8272 71.3602 74.8272C69.2467 74.8272 67.2191 74.1012 65.7202 72.8078L8.00022 22.8425C7.82277 23.4086 7.72869 23.992 7.72021 24.5786V94.0231C7.72021 95.8649 8.56307 97.6312 10.0634 98.9335C11.5637 100.236 13.5985 100.968 15.7202 100.968H127.72C129.842 100.968 131.877 100.236 133.377 98.9335C134.877 97.6312 135.72 95.8649 135.72 94.0231V24.5786C135.688 23.8552 135.526 23.1406 135.24 22.4606ZM21.2002 94.0231H15.6402V89.0578L44.7202 64.0231L50.3602 68.9189L21.2002 94.0231ZM127.64 94.0231H122.04L92.8802 68.9189L98.5202 64.0231L127.6 89.0578L127.64 94.0231Z" fill="#F62AA0"/>
</svg>
<br class="icon-fix"> info#verusamor.salon
</h1>
</div>
I want the svg and the text on the same line on larger screens and for the svg to get smaller as the screen gets smaller in order to keep it on one line, when the svg becomes too small I want the order to change from
svg text
new line
svg text
and change it to
svg
new line
text
new line
svg
new line text.
Thanks for any help.

set svg width & height in percentages and also use max-width properties
<svg width="15%" max-width="70%" height=""></svg>
<svg width="25%" max-width="75%" height=""></svg>

Use SVG image on website with rounded corners - showing white for rounded area

I am creating a very simple React page with an SVG image on it. That SVG image has round corners. I can open it up in GIMP and see the rounded corners shown.
Now I add it to my website like this:
import cardBackR from '../img/cards/2B.svg'
...
<img className='card' src={cardBackR} />
And then when I view the page with the card over a background image, the rounded corners show as white:
Here is the full SVG code of that image.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in">
<defs>
<pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M3 0L6 3L3 6L0 3Z" fill="red"></path>
</pattern>
</defs>
<rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="white" stroke="black"></rect>
<rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect>
</svg>
I've tested this in both Firefox and Chrome. Any ideas what is causing the rounded corners to fail?

SVG in an IMG src should work fine, provided you escape the # with %23
<style>
body{
background:green;
}
</style>
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
class='card' face='2B' height='3.5in' preserveAspectRatio='none' viewBox='-120 -168 240 336' width='2.5in'>
<defs><pattern id='B2' width='6' height='6' patternUnits='userSpaceOnUse'>
<path d='M3 0L6 3L3 6L0 3Z' fill='red'></path></pattern></defs>
<rect width='239' height='335' x='-119.5' y='-167.5' rx='12' ry='12' fill='white' stroke='black'></rect>
<rect fill='url(%23B2)' width='216' height='312' x='-108' y='-156' rx='12' ry='12'></rect>
</svg>">

Figured out the issue. I unfortunately picked a poor name for my class. That is a special class in Bootstrap and that was adding the following CSS:
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}

How can i make Internet Explorer understand my SVG css

Im in the process of generating a map through html and css, however i seem to have an issue when it comes to Internet Explorer as the map is not shown at all i just get a blank page.
the following code is the html part of my map.
<div class="svg">
<svg class="box" width="65%" height="auto" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<foreignobject x="490" y="125" width="140px" height="30px"
class="haderslevnode">
<div class="htext">Haderslev</div>
</foreignobject></a>
</svg>
</div>
And this is the css to make it work. which functions perfectly on Chrome and Firefox respectively.
.svg{
height: 100vmin;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:24px;
color:#ffffff;
}
any advice is apreciated as i would like this to be as accessible as posible.
*Edit
Internet explorer 10 and 11 are the versions i would like this to funktion in

This is working for me in IE:
I've removed the foreign object and I'm using a text element instead. The class .htext has a fill instead of a color.
I've removed width="65%" height="auto" attributes of the SVG element and I've added this in css:
.svg{
height: 100vmin;
width: 100vmin;
}
svg{border:1px black}
.svg{
height: 100vmin;
width: 100vmin;
border:1px solid;
}
.haderslev{
fill:#7c7c7c;
}
.haderslev:hover{
fill:#eab616;
}
.htext{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif,MagistralBold;
font-weight:bold;
font-size:30px;
fill:#ffffff;
}
<div class="svg">
<svg class="box" viewbox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg">
<a href="https://www.google.dk"><polygon class="haderslev"
points="519,5, 538,46, 556,65, 576,61, 591,39, 609,43, 615,60, 622,73,
635,77, 661,70, 730,32, 744,49, 741,69, 731,90, 742,104, 781,128, 787,142,
784,154, 772,179, 769,197, 750,207, 683,212, 667,236, 660,276, 658,281,
626,270, 607,254, 563,247, 520,233, 513,244, 509,265, 371,364, 352,252,
456,227, 437,218, 426,221, 409,242, 389,238, 384,229, 391,216, 400,201,
393,185, 373,170, 349,169, 318,182, 315,197, 302,202, 297,196, 294,171,
290,157, 295,124, 279,99, 265,60, 271,56, 296,63, 311,69, 316,58, 319,49,
351,52, 381,70, 398,50, 406,60, 409,94, 433,98, 451,89, 448,65, 452,50,
463,46, 479,42, 488,12, 507,2" />
<text class="htext" x="490" y="150">Haderslev</text>
</a>
</svg>
</div>
I hope it helps.

Style SVG loaded to HTML as content tag with CSS

I have 3 files:
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<i class="logo myRed" aria-hidden="true"></i>
</body>
</html>
style.css
.logo:before {
content: url("logo.svg");
}
.myRed {
color: #ff2000;
}
logo.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100">
<rect id="logo" width="300" height="100" />
</svg>
How to style the SVG that is pointed out in the CSS content property? (eg. color, font-size, ...) - like in FontAwesome.

You can't.
CSS content: url(image.ext) is similar to loading your image in a <img> tag. And loading an image in a <img> is under the hood loading it in an isolated document, inaccessible for anyone, and which can't access anything.
FontAwesome doesn't load icons like that, they build font-faces, and then call corresponding characters in the content property, e.g something like "\f07b".
So for the browser, FontAwesome icons are just text, and you can style it like any other text.
To style an SVG through CSS, it needs to be in the same document as your stylesheet (or cloned through <use>).
Ok, there is one hack, which may help you, but I can't tell how well it is nor will be supported:
Lea Verou demonstrated that we can (ab)use the :target CSS selector along with the #elem_id fragment identifier to show specific nodes of an SVG Element or apply specific rules.
In you svg's <style> you can create rules like these ones :
#elem_id_1:target ~ #elem_to_color{
fill: red;
}
#elem_id_2:target ~ #elem_to_color{
fill: green;
}
Then in your markup, you just need to have some empty elements placed before #elem_to_color with corresponding ids.
<g id="elem_id_1"></g>
<g id="elem_id_2"></g>
<rect id="elem_to_color"/>
Now when you will load your svg as yourfile.svg#elem_id_1, the first rule will apply and #elem_to_color will be red. If you load it as yourfile.svg#elem_id_2, then #elem_to_color will be green.
This hack allows to have a single svg file, on which we can externally control the rendered styles.
/* a single file for all colors */
.logo::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg);
}
.logo.green::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green);
}
.logo.red::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red);
}
<!-- logo.svg content
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
<style>
#green:target ~ #elem_to_color{
fill: green;
}
#red:target ~ #elem_to_color{
fill: red;
}
</style>
<g id="red"></g>
<g id="green"></g>
<rect id="elem_to_color" width="30" height="30"/>
</svg>
-->
<i class="logo"></i>
<i class="logo green"></i>
<i class="logo red"></i>

Use these CSS properties:
fill: /* color */
font-size: /* font-size */
It will override the original SVG values, as demonstrated below.
.logo svg {
fill: #eee;
}
.logo svg text {
font-size: 30px;
}
.myRed {
color: #ff2000;
}
<div class="logo myRed" aria-hidden="true">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="logo" width="300" height="100" />
<text style=" stroke:black; fill:red;" x="30" y="50" font-size="8">Text Here</text>
</svg>
</div>

A more simplified solution would be the following. The first line of css sets the text color (fill), the second line sets the font properties for the text element and the third line targets the rectangle id (logo) to set the fill.
.logo svg {
fill: #ff0000;
}
.logo svg text {
font-size: 45px;
font-face:Arial,Helvetica;
font-weight:bold
}
#logo {
fill:#eee;
}
<div class="logo" aria-hidden="true">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="logo" width="300" height="100" />
<text x="30" y="50">Text Here</text>
</svg>
</div>