I've a number of SVG icons which I'd like to act as hyperlinks when clicked.
I've tried a few different approaches but the result is always the same, the
clickable area is limited to the SVG's path, or to use an analogy, where the pen has touched the paper.
Consequently some icons have a large non-clickable area:
Is it possible to define a bounding box around the icons and make this clickable? EG:
Here's what I have so far:
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<html>
<head>
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="svgicons.css">
</head>
<body>
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>
</body>
</html>
As I've commented I would add a transparent rect before the path. Please Please observe the attribute pointer-events="all" added to make it clickable.
/* -----
* SVG Icons - svgicons.sparkk.fr
* ----- */
.svg-icon {
width: 3em;
height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
<div style="text-align:center">
<h1>Test Page</h1>
<h2>For Testing Purposes</h2>
<!-- GitHub -->
<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" xmlns:xlink="http://www.w3.org/1999/xlink">>
<a xlink:href="https://github.com">
<title>GitHub</title>
<!--add a transparent rect before the path -->
<rect width="28" height="28" style="fill:none" pointer-events="all"></rect>
<path d="M13.97 1.57c-7.03 0-12.733 5.703-12.733 12.74 0 5.622 3.636 10.393 8.717 12.084.637.13.87-.277.87-.615 0-.302-.013-1.103-.02-2.165-3.54.77-4.29-1.707-4.29-1.707-.578-1.473-1.413-1.863-1.413-1.863-1.154-.79.09-.775.09-.775 1.276.104 1.96 1.316 1.96 1.312 1.135 1.936 2.99 1.393 3.712 1.06.116-.823.445-1.384.81-1.704-2.83-.32-5.802-1.414-5.802-6.293 0-1.39.496-2.527 1.312-3.418-.132-.322-.57-1.617.123-3.37 0 0 1.07-.343 3.508 1.305 1.016-.282 2.105-.424 3.188-.43 1.082 0 2.167.156 3.198.44 2.43-1.65 3.498-1.307 3.498-1.307.695 1.754.258 3.043.13 3.37.815.903 1.314 2.038 1.314 3.43 0 4.893-2.978 5.97-5.814 6.286.458.388.876 1.16.876 2.358 0 1.703-.016 3.076-.016 3.482 0 .334.232.748.877.61 5.056-1.687 8.7-6.456 8.7-12.08-.055-7.058-5.75-12.757-12.792-12.75z"/>
</a>
</svg>
</div>
Related
Usually changing the color on hover of a Bootstrap button with a font icon is really easy, but however, for some reason, I can't make it work with an SVG icon.
Even if I try to add a style on the SVG icon like the example below, that does not really work since the icon color is not changing when hovering the button.
How can I make the icon and the text change to white on button hover?
.svgoutline {
fill: #0d6efd;
}
.svgoutline:hover {
fill: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<span class="me-1">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" width='8px' height='13px' class="svgoutline" style='margin-bottom: 3px;' viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/><title>Browse</title></svg>
You have to add the :hover to the .btn not the svg. Try this
.svgoutline {
fill: #0d6efd;
}
.btn:hover .svgoutline {
fill: #fff;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<span class="me-1">Read More</span> <svg xmlns="http://www.w3.org/2000/svg" width='8px' height='13px' class="svgoutline" style='margin-bottom: 3px;' viewBox="0 0 256 512"><path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/><title>Browse</title></svg>
.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>
i have a problem with some icon color displaying on Iphone.
Here the html code :
<button type="submit" aria-label="Start Searching">
<i className={`icon-search`} aria-hidden="true" />
</button>
Here the svg of the icon :
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<g id="icomoon-ignore">
</g>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
The icon color is correctly displayed ( that to say dark gray ) on Android or any desktop ( including Safari ) but he is fully white on Iphone ( Iphone 8, IOS 15.1 )
Does any one have a solution ?
I was investigating and version feature is deprecated in some browsers, maybe can be that:
See the compatibility table:
Extracted from: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/version#browser_compatibility
I recommend you to use and icon from: https://fontawesome.com/v5.15/icons?d=gallery&p=2
As #A Haworth pointed out: it might be ralated to some css rule in your global css.
Browser specific default styles
Since your icon already contains a hard coded fill attribute, my suspicion is your icon is colored white due to a safari default button style.
You could try to disable default button styling by applying an appearance: none rule.
button {
font-size: 2em;
display: block;
width: 100%;
}
button svg {
display: inline-block;
height: 1em;
}
.btn-default {
appearance: none;
background: #fff;
border: 1px solid #000;
}
.btn-default-use {
color: #666;
}
button svg {
display: inline-block;
width: 1em;
}
.svgAssetHiddden {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<p>button</p>
<button type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button appearance none</p>
<button class="btn-default" type="submit" aria-label="Start Searching">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title>Search</title>
<path fill="#666" d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z"></path>
</svg>
</button>
<p>button use</p>
<button class="btn-default btn-default-use" type="submit" aria-label="Start Searching">
<svg viewBox="0 0 1024 1024">
<use href="#searchIcon" />
</svg>
</button>
<svg class="svgAssetHiddden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-hidden="true">
<symbol id="searchIcon" fill="currentColor">
<path d="M637.117 637.117c81.229-81.229 81.229-212.928 0-294.157s-212.928-81.228-294.157 0c-81.228 81.229-81.228 212.928 0 294.157s212.928 81.229 294.157 0zM653.322 687.229c-100.573 83.475-250.045 78.086-344.302-16.17-99.974-99.974-99.974-262.067 0-362.040 99.975-99.974 262.065-99.974 362.039 0 94.256 94.258 99.648 243.73 16.17 344.302 0.272 0.25 0.538 0.502 0.8 0.765l90.509 90.512c9.373 9.373 9.373 24.566 0 33.939s-24.566 9.373-33.939 0l-90.512-90.509c-0.262-0.262-0.515-0.531-0.765-0.8z" />
</symbol>
</svg>
Eventually, it might also be related to a Dark mode setting overriding your original fill to ensure a sufficient contrast.
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed last year.
There are two containers, myapp-icon (green) and myapp-svg-icon (blue), containing an SVG element (red).
Screenshot
I would expect the blue box to have the same size as the red box, but it's not. What am I doing wrong?
Sandbox: https://jsfiddle.net/ja1vnop9/
Minimal example:
<html>
<style>
myapp-icon {
background: green;
}
myapp-svg-icon {
background: blue;
}
svg {
background: red;
}
</style>
<body>
<myapp-icon>
<myapp-svg-icon>
<svg height="80" viewBox="0 0 67 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M52.3737 11.0954H51.8242C50.1613 7.38468 47.3573 4.31697 43.8301 2.34953C40.303 0.382096 36.2417 -0.37969 32.2516 0.177742C28.2616 0.735173 24.5565 2.58197 21.6887 5.44281C18.8209 8.30365 16.944 12.0253 16.3378 16.053C14.7917 15.4659 13.143 15.2054 11.4935 15.2877C9.84392 15.37 8.22856 15.7932 6.74701 16.5314C5.26547 17.2695 3.94917 18.3069 2.87933 19.5795C1.80948 20.852 1.00879 22.3328 0.526636 23.9305C0.0444866 25.5282 -0.10889 27.2089 0.0759685 28.8688C0.260827 30.5288 0.780001 32.1328 1.60146 33.5819C2.42292 35.0311 3.52923 36.2946 4.85216 37.2946C6.17508 38.2946 7.68655 39.0098 9.29332 39.3961C10.429 39.7743 11.6146 39.9767 12.8101 39.9963H52.3737C56.1628 39.9963 59.7967 38.4739 62.476 35.7639C65.1553 33.0539 66.6606 29.3784 66.6606 25.5458C66.6606 21.7133 65.1553 18.0378 62.476 15.3278C59.7967 12.6178 56.1628 11.0954 52.3737 11.0954Z"
fill="#FFDA33" _ngcontent-wsq-c51=""></path>
</svg>
</myapp-svg-icon>
</myapp-icon>
</body>
</html>
Add display: block; to your svg CSS...
<html>
<style>
myapp-icon {
background: green;
}
myapp-svg-icon {
background: blue;
}
svg {
background: red;
display: block;
}
</style>
<body>
<myapp-icon>
<myapp-svg-icon>
<svg height="80" viewBox="0 0 67 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M52.3737 11.0954H51.8242C50.1613 7.38468 47.3573 4.31697 43.8301 2.34953C40.303 0.382096 36.2417 -0.37969 32.2516 0.177742C28.2616 0.735173 24.5565 2.58197 21.6887 5.44281C18.8209 8.30365 16.944 12.0253 16.3378 16.053C14.7917 15.4659 13.143 15.2054 11.4935 15.2877C9.84392 15.37 8.22856 15.7932 6.74701 16.5314C5.26547 17.2695 3.94917 18.3069 2.87933 19.5795C1.80948 20.852 1.00879 22.3328 0.526636 23.9305C0.0444866 25.5282 -0.10889 27.2089 0.0759685 28.8688C0.260827 30.5288 0.780001 32.1328 1.60146 33.5819C2.42292 35.0311 3.52923 36.2946 4.85216 37.2946C6.17508 38.2946 7.68655 39.0098 9.29332 39.3961C10.429 39.7743 11.6146 39.9767 12.8101 39.9963H52.3737C56.1628 39.9963 59.7967 38.4739 62.476 35.7639C65.1553 33.0539 66.6606 29.3784 66.6606 25.5458C66.6606 21.7133 65.1553 18.0378 62.476 15.3278C59.7967 12.6178 56.1628 11.0954 52.3737 11.0954Z"
fill="#FFDA33" _ngcontent-wsq-c51=""></path>
</svg>
</myapp-svg-icon>
</myapp-icon>
</body>
</html>
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;
}