I am using the svg <use /> element to duplicate an icon in multiple places:
<svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg>
I would like to be able to control the size of the icon and the color but I do not know how.
Changing the fill, color, width and height of .icon-BusinessUnit does not change anything.
polygon,
rect {
fill: transparent;
stroke: #fff;
stroke-width: 1;
}
g path {
stroke: #fff;
stroke-opacity: 0.6;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
font-size: 32px;
color: red;
}
========================================== */
.icon-Activity {
width: 10.2001953125em;
}
.icon-BusinessUnit {
width: 1.2001953125em;
}
.icon-SublevelBusinessFunction {
width: 0.900390625em;
}
.icon-SublevelBusinessUnit {
width: 0.533203125em;
}
html {
font-size: 62.5%;
overflow-y: scroll;
position: relative;
min-height: 100%;
height: 100%;
}
body {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
line-height: 1;
background: linear-gradient(#348dc5, #00435d);
}
*,
*:before,
*:after {
box-sizing: border-box !important;
}
ul {
padding: 0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="/favicon.ico">
<title>D3</title>
<style type="text/css">
/* break points */
/* be consistent with spacing to avoid random pixel adding. */
</style>
</head>
<body cz-shortcut-listen="true">
<div id="root">
<div class="gel-wrap">
<div class="gel-layout">
<div class="gel-layout__item ">
<div style="display: inline-block; position: relative; width: 100%; vertical-align: top; overflow: hidden;"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1300 800"><g class="vx-group vx-cluster" transform="translate(100, 100)"><g class="vx-group" transform="translate(0, 0)"><g class="vx-group" transform="translate(490, 0)"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"></polygon><svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg></g>
</g>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://localhost:8088/static/js/main.js"></script>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-Activity">
<title>Activity</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0 26c0-3.314 2.686-6 6-6 0.176 0 0.352 0.010 0.524 0.024l6.45-10.75c-0.614-0.942-0.974-2.066-0.974-3.276 0-3.314 2.686-6 6-6s6 2.686 6 6c0 1.208-0.358 2.334-0.974 3.276l6.45 10.75c0.172-0.014 0.348-0.024 0.524-0.024 0.134 0 0.266 0.006 0.396 0.014l4.56 2.604c0.658 0.962 1.044 2.128 1.044 3.382 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.208 0.358-2.334 0.974-3.276l-6.45-10.75c-0.172 0.014-0.348 0.024-0.524 0.024s-0.352-0.010-0.524-0.024l-6.45 10.75c0.614 0.942 0.974 2.066 0.974 3.274 0 3.314-2.686 6-6 6-3.314 0.002-6-2.684-6-5.998z"></path>
</symbol>
<symbol id="icon-BusinessUnit">
<title>Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
<symbol id="icon-SublevelBusinessFunction">
<title>Sublevel Business Function</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.96 29.626h10.401v-9.503h6.252v9.503h10.401v-28.666h-27.053v28.666zM16.384 7.715h6.252v6.252h-6.252v-6.252zM6.337 7.715h6.252v6.252h-6.252v-6.252z"></path>
</symbol>
<symbol id="icon-SublevelBusinessUnit">
<title>Sublevel Business Unit</title>
<path fill="#fff" style="fill: var(--color1, #fff)" d="M0.561 30.314h6.318v-6.46h3.797v6.46h6.318v-28.924h-16.433v28.924zM9.93 4.798h3.797v3.797h-3.797v-3.797zM9.93 10.901h3.797v3.797h-3.797v-3.797zM9.93 17.004h3.797v3.797h-3.797v-3.797zM3.827 4.798h3.797v3.797h-3.797v-3.797zM3.827 10.901h3.797v3.797h-3.797v-3.797zM3.827 17.004h3.797v3.797h-3.797v-3.797z"></path>
</symbol>
</defs>
</svg>
</body>
</html>
Your HTML and SVG structure are quite complex so I have simplified it down to the bare minimum. You had hardcoded the fill as #fff on the PATH which made it difficult to affect the fill color of each copy of the symbol. Perhaps you have a good reason to nest SVGs inside other SVGs but as you can see, it's not necessary to achieve your desired result. (I have removed the POLYGON to further simplify the issue.)
This works, hopefully as you intended:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.d1{
fill: red;
}
.d2{
fill: green;
}
.d3{
fill: orange;
}
</style>
<symbol id="icon-BusinessUnit">
<path d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
</symbol>
</defs>
<use xlink:href="#icon-BusinessUnit" class="d1" transform="translate(0 0) scale(1)"/>
<use xlink:href="#icon-BusinessUnit" class="d2" transform="translate(100 0) scale(1.5)"/>
<use xlink:href="#icon-BusinessUnit" class="d3" transform="translate(200 0) scale(2)"/>
</svg>
In future please just abbreviate the code you're providing so that we can focus on the parts which are relevant to your question. And it's always good to include a Codepen / Fiddle or similar, otherwise people may not take the time to set up one for you. See https://codepen.io/MSCAU/pen/KxybQ.
Related
This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
I've made an SVG with a transparent background and I added it to the orange box in my HTML, and now I'm trying to add another element in my box (like this blue box here) with my SVG displaying onto the blue box; but no matter how big the z-index I give to my SVG and a position: relative, it wouldn't be displayed over my blue box, which is what I'm struggling to approach,
Any possible solutions would be welcome!
body {
background-color: olive;
}
.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
}
.box:hover svg {
position: relative;
z-index: 10000;
display: block;
}
.box .cover {
width: 60px;
height: 60px;
background-color: blue;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="cover"></div>
<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="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M30,54C16.77,54,6,43.23,6,30h1c0,12.68,10.32,23,23,23c12.68,0,23-10.32,23-23C53,17.32,42.68,7,30,7
C19.25,7,9.79,14.61,7.52,25.11c-0.06,0.27-0.32,0.44-0.59,0.38c-0.27-0.06-0.44-0.32-0.38-0.59C8.92,13.95,18.78,6,30,6
c13.23,0,24,10.77,24,24S43.23,54,30,54z"/>
</g>
<g>
<path class="st0" d="M30,49c-11.03,0-20-8.76-20-19.52c0-0.26,0.22-0.48,0.49-0.48c0.27,0,0.49,0.21,0.49,0.48
c0,10.24,8.53,18.57,19.02,18.57c10.49,0,19.02-8.33,19.02-18.57c0-0.26,0.22-0.48,0.49-0.48S50,29.21,50,29.48
C50,40.24,41.03,49,30,49z"/>
</g>
<g>
<g>
<path class="st0" d="M22.5,32.5c-1.93,0-3.5-2.02-3.5-4.5v-9c0-2.48,1.57-4.5,3.5-4.5S26,16.52,26,19v9
C26,30.48,24.43,32.5,22.5,32.5z M22.5,15.5c-1.35,0-2.5,1.6-2.5,3.5v9c0,1.9,1.15,3.5,2.5,3.5S25,29.9,25,28v-9
C25,17.1,23.85,15.5,22.5,15.5z"/>
</g>
</g>
<g>
<path class="st1" d="M41,28c0,2.2-1.35,4-3,4s-3-1.8-3-4v-9c0-2.2,1.35-4,3-4s3,1.8,3,4V28z"/>
</g>
<path class="st2" d="M27,1"/>
</svg>
</div>
</body>
</html>
This happens because your SVG has a "static" position by default.
Z-index only affects elements that have a position value other than static.
In your case assigning position: relative to your SVG will help.
Add the following to your css and it will work as expected (z-index will change on hover, since you applied it to :hover)
.box svg {
position:relative;
}
Try putting this in your svg:
position:relative;
z-index:99;
I have to do it like this
I want to make this icon from two elements. There are should be blue background and svg. How can I make this?
This is my code:
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
Use same width & height and add some padding.
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 20px;
height: 20px;
background: #000;
padding: 10px; /* your icon's total width & height is 40px */
border-radius: 8px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
This is an example using flex on a parent div + hover;
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
.facebook_ {
background-color: #3b5998;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20%;
transition: .3s;
cursor: pointer;
}
.facebook_:hover {
background-color: grey;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<div class="facebook_">
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
<div>
<svg id=FaceBookLogo width=100px viewBox='0 0 300 300'>
<rect fill='#3b5998' width='100%' height='100%' rx='15%'/>
<path fill='white' d='M110 80c0-1 0-5 1-9 0-5 2-10 6-15 3-5 8-10 16-14 7-4
18-6 31-6h38v42h-28c-3 0-5 1-8 3-2 2-3 4-3 6v26h39c0
5-1 10-1 15l-1 13c-1 4-1 8-2 12h-35v115h-52v-115
h-25v-39h25v-32z'/>
</svg>
<style>
#FaceBookLogo rect{
fill:var(--FBblue,#3b5998);
}
#FaceBookLogo path{
fill:var(--FBwhite,white)
}
#FaceBookLogo:hover{
--FBblue:green;
--FBwhite:gold;
width:150px;
}
</style>
I used https://yqnn.github.io/svg-path-editor/ to multiply the path definition by a scale 10 to get rid of all decimal positions and still maintain some accuracy in the letter F outline.
Now play with the 300 viewBox size to scale the letter, and change M110 80 at the start of the path (x y) to position the letter.
I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.
HTML
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
CSS
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 500px;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
JSFIDDLE
As the container is flex, you can just add flex-grow:1; to the svg you want to grow:
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
.container svg:nth-child(2) {flex-grow:1;}
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used
Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.
.container {
display: flex;
align-items:center;
}
svg {
width: 100%;
height: 100px;
}
svg:nth-child(2) {
width: 1000px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 2000px;
}
svg rect.st0 {
fill: blue;
}
JSFIDDLE
I have a 16x16px SVG with 10px of padding and 1px border and for some reason, the height is 40px instead of 38px, like the width (on my local site, it's actually 36.95x44px). What can I do to eliminate this extra space and achieve a perfect square?
.layout-toggle {
display: inline-block;
padding: 10px;
border: 1px solid grey;
}
.layout-toggle.layout-active {
background-color: black;
}
.layout-toggle.layout-active svg {
fill: white;
width: 1em;
height: 1em;
}
.layout-toggle .layout-icon {
width: 1em;
height: 1em;
vertical-align: middle;
}
<a href="#">
<div class="layout-toggle">
<svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve">
<g>
<g>
<g id="calendar-view-01">
<g>
<g id="Calender-Layout-Icon_no-border-1">
<path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4
V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" />
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</a>
http://codepen.io/ourcore/pen/rjLmRM
That is because your <svg> element is displayed inline by default. If you explicitly declare display: block on the element, the height will compute correctly.
When inline display is active, the element will often have "uncontrollable" height due to the fact that:
you cannot explicitly dictate vertical dimensions—be it margin, padding, height—on inline elements, resulting in unpredictable dimensions and
the element's vertical height is influenced by line height inherited from the text node.
.layout-toggle {
display: inline-block;
padding: 10px;
border: 1px solid grey;
}
.layout-toggle.layout-active {
background-color: black;
}
.layout-toggle.layout-active svg {
fill: white;
width: 1em;
height: 1em;
}
.layout-toggle .layout-icon {
display: block; /* Use display: block to force proper height */
width: 1em;
height: 1em;
vertical-align: middle;
}
<a href="#">
<div class="layout-toggle">
<svg class="layout-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" viewbox="0 0 17 16" style="enable-background:new 0 0 17 16;" xml:space="preserve">
<g>
<g>
<g id="calendar-view-01">
<g>
<g id="Calender-Layout-Icon_no-border-1">
<path d="M0.3,0h4v4h-4V0z M0.3,6h4v4h-4V6z M0.3,12h4v4h-4V12z M6.3,0h4v4h-4V0z M6.3,6h4v4h-4V6z M6.3,12h4v4h-4
V12z M12.3,0h4v4h-4V0L12.3,0z M12.3,6h4v4h-4V6L12.3,6z M12.3,12h4v4h-4V12L12.3,12z" />
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
</a>
I am trying to implement the
http://demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
to my needs
The problem is that I want the button Ive created to change the style of a div outside the figure tag. I can not find a way to do that.
All I need is by hovering over the .my-1 button, to display the .y1 div
Here is the code so far.
<style type="text/css">
#burj-imagemap {
overflow: hidden;
padding-bottom: 75%;
vertical-align: middle;
width: 100%;
}
#burj-imagemap svg {
display: inline-block;
left: 0;
position: absolute;
top: 0;
}
.my-1:hover {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;
}
.my-1 {cursor: pointer;}
.y1 {
display: none;
}
.my-1:hover .y1 {
display: block;
background-color: #F00;
height: 250px;
width: 250px;
z-index:1000;
}
</style>
<figure id="burj-imagemap">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1200 808" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<image xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" height="808" width="1200">
</image>
<a class="my-1" >
<g>
<defs>
<polygon id="SVGID_1_" points="322,131 62,240 79,346 274,250 412,405 501,250"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
<image overflow="visible" width="1200" height="808" xlink:href="http://demosthenes.info/assets/images/burj-khalifa.jpg" transform="matrix(1 0 0 1 -33.5 -301)">
</image>
</g>
</g></a>
</svg>
</figure>
<div class="y1">Hi!</div>
any ideas?
You could include an event handler in the svg like this..
<g clip-path="url(#SVGID_2_)" onmouseover="document.getElementById('y1').style['display'] = 'inline';">
<div id="y1" class="y1">Hi!</div>
fiddle here http://jsfiddle.net/9mDur/