Relatively scale Svg inside fixed Div (CSS and JS) - javascript
I have two svg graphics which do not have the same size, but the content does relatively suit each other, see the following example:
The Goal
I search for a solution which preserves the ratio between both svg´s while having both images in a "fixed frame".
The Problem
The following example shows how the left person "gets bigger" since the svg is smaller than the svg from the right person and can grow more inside the fxied frame (max-width and max-height 100%) like this
I can´t change the svg files (i.e. the viewbox) since they are loaded on a canvas and working right there.
This two SVGs are just an example, there are a lot of other SVGs with different sizes and ratios between each other.
JsFiddle
I prepared a Fiddle to play around and try possible solutions: https://jsfiddle.net/e6hs4w3s/
I know you're looking to strictly use CSS, but as a (potential) fallback you could use JavaScript to resize the smaller svg, based on the ratio of the larger svg's computed height / natural height.
This is the line that resizes the smaller img based on the desired proportions: shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
var images = document.querySelectorAll('.Tile');
var img1 = images[0];
var img2 = images[1];
if (img1.naturalHeight > img2.naturalHeight) {
tallImg = img1;
shortImg = img2;
} else {
tallImg = img2;
shortImg = img1;
}
shortImg.height = shortImg.naturalHeight * (tallImg.height / tallImg.naturalHeight);
.Box {
display: inline-flex;
align-items: flex-end;
justify-content: center;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
vertical-align: bottom;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<img src="http://imgh.us/lay.svg" />
<img src="http://imgh.us/heart_23.svg" />
<hr />
<div class="Box">
<img class="Tile" src="http://imgh.us/lay.svg" />
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>
Use a more appropriate viewBox for the sitting person. Make the viewBox y and height components match the ones in the standing SVG.
In your case the "standing" SVG has a viewBox y=0 and height=367. The "sitting" SVG has a height=269.
If you make the sitting one have a viewBox height of 367 also, the proportions of the two will match. However you'll need to change the y component of its viewBox as well - otherwise it will be at the top of the SVG instead of the bottom. So we set the y component to (269-367) to correct that.
viewBox="0 -98 230.31494 367"
.Box {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
.Tile {
max-width: 100%;
max-height: 100%;
}
<div class="Box">
<svg
class="Tile"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Ebene_1"
x="0px"
y="0px"
width="6.499999cm"
height="7.5915117cm"
viewBox="0 -98 230.31494 367"
enable-background="new 0 0 283.46 283.46"
xml:space="preserve"
inkscape:version="0.92.0 r15299"
sodipodi:docname="zugewandt_nach_unten.svg"><metadata
id="metadata27"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs25" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1280"
inkscape:window-height="657"
id="namedview23"
showgrid="false"
units="cm"
inkscape:zoom="1"
inkscape:cx="51.890866"
inkscape:cy="140.27666"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Ebene_1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:pagecheckerboard="true" />
<g
id="g3"
transform="matrix(-1.1825709,0,0,1.1825709,230.31821,-66.220423)">
<path
d="m 154.409,92.382 c 2.378,4.021 6.902,5.898 12.702,6.499 -4.37,4.104 -14.615,1.891 -12.702,-6.499 z"
id="path5"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 95.329,181.592 c -1.929,-2.74 -7.111,-5.074 -9.452,-8.567 1.326,-3.302 3.538,-5.093 5.612,-8.271 2.503,1.253 3.837,4.155 6.204,5.907 2.975,2.204 7.198,4.248 10.93,6.204 7.161,3.754 14.226,6.105 21.859,10.93 -1.638,3.984 -5.125,8.652 -7.976,12.406 -1.792,-0.078 -1.973,-1.018 -3.25,-2.362 1.052,4.188 3.411,6.844 6.203,9.452 3.106,2.9 13.093,7.684 13.884,12.702 0.667,4.229 -3.668,8.383 -6.499,9.747 -4.851,2.338 -11.467,2.618 -18.314,3.545 -17.772,2.408 -39.861,6.749 -54.353,10.634 -0.07,-3.613 0.012,-7.077 0.295,-10.338 7.509,-3.136 14.493,-7.042 22.154,-10.634 7.693,-3.607 16.185,-5.73 26.29,-6.5 3.629,-0.275 7.491,1.302 10.043,-0.295 -5.255,-1.816 -13.221,-2.709 -20.382,-1.772 -3.784,0.495 -9.981,4.586 -12.875,4.756 -4.165,0.245 -7.423,-6.422 -10.756,-8.891 -4.354,-3.225 -7.647,-6.24 -10.93,-9.749 -0.243,-7.731 0.063,-16.014 -3.249,-20.677 -0.934,4.94 0.733,11.296 0.295,19.2 -0.528,9.541 -3.121,20.377 -3.841,32.789 -0.318,5.496 -0.798,10.925 -0.295,17.428 0.388,4.998 2.265,13.149 1.182,16.247 -0.645,1.846 -6.201,5.688 -7.976,7.09 -4.705,3.72 -7.906,7.009 -13.588,7.68 -2.893,0.343 -6.303,-0.408 -6.794,-1.772 -0.258,-0.717 1.764,-2.797 3.25,-4.431 1.744,-1.918 2.818,-3.332 3.544,-4.431 1.965,-2.972 4.74,-6.738 6.203,-9.749 1.402,-2.883 0.811,-4.989 0.591,-8.861 -0.31,-5.44 0.422,-12.134 0,-17.428 -1.251,-15.694 -3.658,-33.514 -4.431,-51.103 -0.344,-7.83 -0.436,-15.952 0.591,-22.451 0.845,-5.349 4.916,-10.429 12.702,-7.975 2.738,0.862 8.226,5.452 10.93,7.384 10.395,7.428 19.205,17.48 32.199,22.156 z"
id="path7"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 165.633,186.908 c 1.453,8.804 -3.142,22.188 1.479,27.472 2.745,3.142 9.129,6.53 13.904,8.053 3.712,1.183 9.56,1.866 12.472,4.543 -3.165,2.398 -10.156,0.245 -14.266,-0.483 -5.991,-1.064 -12.716,-2.966 -18.609,-0.887 -4.011,1.414 -5.568,5.899 -10.34,5.612 -2.66,-0.501 1.098,-2.64 1.772,-4.135 4.068,-9.019 3.812,-23.248 2.067,-34.857 5.049,-0.566 8.242,-2.986 11.521,-5.318 z"
id="path9"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 40.091,237.219 c 0.182,4.248 -0.608,7.899 0,11.723 -9.146,1.374 -19.969,5.869 -29.54,6.499 -2.362,0.154 -5.277,0.199 -6.499,-1.772 0.896,-3.576 2.178,-3.695 4.333,-4.424 8.607,-2.91 15.533,-9.286 22.549,-12.709 2.045,-0.999 6.426,0.218 9.157,0.683 z"
id="path11"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 169.117,105.585 c -3.789,-2.385 -8.862,-2.115 -13.587,-0.295 -1.44,0.555 -2.468,1.662 -3.841,1.772 -3.503,0.283 -5.502,-0.698 -8.567,-2.068 0.831,2.518 3.815,2.881 5.908,4.136 -0.84,2.311 -1.232,0.879 -1.863,4.271 1.753,-0.043 2.258,-1.242 3.92,-2.761 2.919,-2.67 11.884,-7.785 16.258,-2.101 0.66,0.857 1.29,2.776 1.479,4.135 0.885,6.416 0.351,14.986 0,22.746 -0.697,15.317 -0.622,31.636 -2.66,41.946 -3.868,0.563 -6.138,2.725 -10.93,2.363 -1.492,-14.936 1.168,-36.355 -6.498,-46.081 -0.777,4.567 2.566,9.542 2.067,14.474 -0.373,3.697 -3.416,7.464 -5.021,10.93 -2.746,5.929 -4.522,12.689 -7.975,16.838 -5.693,-2.095 -11.339,-5.942 -16.542,-9.748 -2.36,-1.727 -7.439,-6.067 -7.976,-9.159 -0.516,-2.975 1.074,-7.574 2.068,-11.224 1.699,-6.246 3.776,-11.365 3.249,-19.201 -2.357,1.513 -2.405,4.688 -2.954,7.09 -0.567,2.476 -1.357,5.154 -2.068,7.679 -1.388,4.935 -5.411,13.406 -2.659,18.316 2.058,3.672 9.207,8.246 12.997,10.633 5.443,3.428 9.08,7.222 14.18,9.453 4.87,2.132 10.908,-0.73 15.746,-1.123 1.674,0.292 0.589,1.919 -0.268,3.207 6.101,1.975 15.711,-6.053 15.537,-1.493 -2.353,9.6 -23.563,12.656 -34.561,6.203 -8.282,-4.858 -18.467,-9.137 -26.585,-13.884 -2.803,-1.639 -5.919,-3.115 -8.271,-5.021 -2.07,-1.676 -6.064,-6.029 -6.499,-8.271 -0.8,-4.127 1.95,-10.061 3.249,-15.064 2.158,-8.304 3.753,-13.701 6.794,-20.382 0.924,-2.03 2.024,-4.664 2.954,-5.612 4.713,-4.809 18.369,-4.518 26.29,-6.794 2.859,-0.822 5.622,-2.228 6.794,-5.318 2.344,-6.177 -1.19,-12.252 -1.772,-17.723 -0.861,-8.079 1.603,-15.854 5.316,-20.383 6.295,-7.677 20.574,-12.459 31.312,-6.499 4.378,2.43 9.727,7.719 10.854,12.19 2.453,9.716 -4.879,23.439 -10.123,28.416 -1.647,1.565 -3.207,3.117 -5.752,3.407 z m -7.384,-20.677 c 0.229,0.065 0.342,0.247 0.294,0.591 3.046,1.599 5.774,-1.618 3.842,-4.135"
id="path13"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
<path
d="m 162.186,55.997 c 0.199,0 0.196,0 0.396,0 6.142,0 11.791,1.277 15.852,4.135 4.196,2.953 8.647,8.275 9.748,13.588 1.209,5.828 -0.092,12.4 -2.067,17.428 -2.923,7.438 -9.257,13.562 -14.474,18.019 2.43,10.587 0.839,24.841 0.296,37.22 -0.468,10.617 -1.039,21.178 -2.659,30.426 1.421,0.761 2.186,0.926 2.363,3.249 0.125,1.649 -0.746,4.244 -2.954,5.907 -0.581,3.304 -0.086,8.046 -0.295,12.997 -0.196,4.656 -0.933,9.164 0.591,12.407 1.837,3.913 12.26,8.465 17.132,10.044 3.475,1.125 7.552,1.816 8.566,5.908 1.064,4.288 -8.802,2.549 -13.884,2.066 -5.919,-0.561 -11.474,-2.473 -15.95,-2.066 -3.359,0.304 -5.824,3.119 -8.862,5.021 -2.046,1.282 -8.383,3.896 -9.748,0 -0.917,-2.614 1.959,-5.31 2.954,-7.975 3.302,-8.851 3.733,-19.401 2.658,-31.607 -7.682,1.293 -13.458,-1.375 -18.905,-3.25 -2.427,4.663 -5.369,8.811 -8.271,12.997 4.168,6.246 16.768,9.067 17.725,18.02 1.525,14.28 -15.868,14.926 -27.472,16.542 -18.028,2.513 -39.852,6.658 -54.648,10.043 -0.06,3.664 0.596,6.441 0.886,9.158 0.283,2.663 1.301,6.291 0.591,9.452 -0.671,2.981 -5.512,5.316 -8.862,7.976 -5.566,4.418 -9.548,9.458 -17.428,9.748 -4.32,0.159 -10.468,-1.677 -10.634,-4.727 -0.109,-1.997 2.922,-4.173 4.431,-5.611 5.661,-5.403 11.798,-15.013 10.93,-20.088 -2.639,-0.34 -6,1.328 -9.453,2.068 -3.363,0.721 -7.076,1.395 -10.635,2.068 -5.167,0.977 -19.593,3.505 -20.086,-3.25 -0.5,-6.841 11.431,-7.824 16.542,-10.93 6.697,-4.069 12.635,-14.058 23.534,-8.613 -2.043,-15.677 -4.313,-36.206 -5.428,-54.158 -0.33,-5.322 -0.356,-10.632 0.209,-15.508 1.092,-9.412 6.831,-18.869 18.314,-15.656 2.347,0.657 5.177,3.024 7.681,4.726 7.516,5.112 14.579,11.641 21.563,16.247 3.45,-3.143 5.502,-4.255 7.208,-8.248 -1.796,-4.543 -0.257,-7.046 0.159,-8.922 1.07,-4.835 2.708,-6.9 4.154,-11.779 1.529,-5.16 2.977,-9.229 4.431,-14.178 1.398,-4.757 3.601,-8.829 7.09,-11.521 3.581,-2.763 8.66,-3.413 14.179,-4.431 3.427,-0.632 10.732,-0.849 13.588,-2.363 6.498,-3.447 1.389,-14.053 0.886,-20.677 -0.491,-6.473 0.888,-12.902 3.25,-17.429 4.873,-9.345 13.085,-13.365 24.808,-14.473 z m 12.683,46.181 c 5.244,-4.976 12.22,-18.445 9.769,-28.162 -1.13,-4.471 -5.963,-9.977 -10.341,-12.407 -10.737,-5.961 -25.016,-1.179 -31.311,6.499 -3.713,4.529 -6.177,12.304 -5.317,20.383 0.583,5.471 4.116,11.546 1.772,17.723 -1.172,3.09 -3.935,4.496 -6.794,5.317 -7.92,2.277 -21.577,1.985 -26.29,6.794 -0.93,0.948 -2.03,3.583 -2.954,5.612 -3.042,6.681 -4.637,12.077 -6.794,20.382 -1.299,5.003 -4.049,10.938 -3.249,15.065 0.435,2.242 4.429,6.594 6.499,8.271 2.352,1.905 5.468,3.382 8.271,5.021 8.118,4.748 18.191,9.22 26.585,13.884 10.919,6.067 31.195,3.359 34.562,-6.202 -0.572,-3.586 -10.684,4.357 -16.784,2.382 -0.675,-1.012 2.209,-3.449 0.535,-3.741 -4.839,0.394 -9.897,2.899 -14.767,0.769 -5.1,-2.233 -8.736,-6.025 -14.18,-9.454 -3.791,-2.386 -10.939,-6.961 -12.997,-10.634 -2.752,-4.91 1.271,-13.38 2.659,-18.314 0.71,-2.526 1.501,-5.203 2.068,-7.68 0.549,-2.401 0.597,-5.576 2.954,-7.089 0.527,7.834 -1.55,12.955 -3.249,19.201 -0.994,3.65 -2.584,8.248 -2.068,11.225 0.536,3.091 5.615,7.431 7.976,9.157 5.203,3.807 11.206,7.031 16.542,9.748 3.453,-4.147 5.229,-10.907 7.975,-16.838 1.605,-3.466 4.117,-7.768 5.022,-10.929 -0.897,-4.338 -2.846,-9.908 -2.068,-14.475 7.666,9.726 5.006,31.145 6.499,46.082 4.791,0.36 7.061,-1.801 10.93,-2.363 2.037,-10.31 1.962,-26.63 2.659,-41.947 0.351,-7.759 0.886,-16.33 0,-22.745 -0.188,-1.359 -0.818,-3.278 -1.478,-4.135 -4.374,-5.684 -12.805,-0.391 -15.724,2.278 -1.662,1.52 -4.009,3.831 -5.545,4.811 -0.104,-3.254 1.893,-4.276 2.954,-6.499 -2.093,-1.254 -5.077,-1.618 -5.908,-4.136 3.275,0.366 5.063,2.351 8.566,2.068 1.374,-0.11 2.4,-1.218 3.842,-1.772 4.724,-1.819 9.797,-2.09 13.587,0.295 2.297,-0.416 3.945,-1.88 5.592,-3.445 z M 62.935,159.385 c -2.704,-1.933 -8.192,-6.522 -10.93,-7.385 -7.786,-2.454 -11.857,2.627 -12.702,7.976 -1.027,6.499 -0.935,14.62 -0.591,22.45 0.773,17.589 3.179,35.409 4.431,51.103 0.422,5.295 -0.31,11.988 0,17.429 0.22,3.872 0.812,5.979 -0.591,8.861 -1.463,3.011 -4.238,6.776 -6.203,9.749 -0.727,1.098 -1.8,2.513 -3.544,4.43 -1.485,1.634 -3.507,3.714 -3.25,4.432 0.491,1.364 3.901,2.114 6.794,1.772 5.682,-0.672 8.883,-3.961 13.588,-7.68 1.775,-1.403 7.331,-5.245 7.976,-7.09 1.083,-3.099 -0.794,-11.249 -1.182,-16.247 -0.503,-6.503 -0.023,-11.933 0.295,-17.429 0.72,-12.411 3.313,-23.248 3.841,-32.789 0.438,-7.904 -1.229,-14.259 -0.295,-19.199 3.312,4.662 3.005,12.944 3.249,20.677 3.283,3.508 6.576,6.524 10.93,9.748 3.333,2.469 7.104,7.11 11.469,7.912 2.883,-0.617 8.379,-3.282 12.163,-3.777 7.162,-0.936 15.127,-0.043 20.382,1.772 -2.553,1.598 -6.414,0.021 -10.043,0.296 -10.105,0.77 -18.597,2.893 -26.29,6.499 -7.661,3.592 -14.645,7.498 -22.154,10.634 -0.284,3.262 -0.366,6.725 -0.295,10.339 14.491,-3.886 36.58,-8.226 54.353,-10.634 6.847,-0.927 13.463,-1.207 18.314,-3.545 2.831,-1.364 7.166,-5.52 6.499,-9.748 -0.791,-5.018 -10.777,-9.801 -13.883,-12.702 -2.792,-2.608 -5.151,-5.264 -6.203,-9.452 1.474,0.596 1.829,1.089 3.25,2.362 2.851,-3.754 6.337,-8.422 7.976,-12.406 -8.059,-3.791 -14.698,-7.176 -21.859,-10.929 -3.732,-1.957 -7.955,-4.001 -10.93,-6.204 -2.366,-1.753 -4.279,-3.636 -6.203,-5.907 -1.688,3.518 -4.286,4.969 -5.612,8.271 2.341,3.493 7.523,5.827 9.452,8.567 -12.999,-4.677 -21.809,-14.729 -32.202,-22.156 z m 77.983,18.314 c 3.315,0.798 7.125,-0.198 10.614,-0.698 -0.266,-7.613 0.624,-15.659 -0.57,-22.343 -3.257,7.772 -5.556,16.5 -10.044,23.041 z m 12.998,14.475 c 1.744,11.608 1.998,25.839 -2.068,34.856 -0.675,1.496 -3.701,3.508 -1.772,4.135 4.772,0.287 6.328,-4.197 10.338,-5.611 5.896,-2.08 12.621,-0.178 18.61,0.886 4.111,0.729 12.236,3.119 12.407,0 0.196,-2.137 -6.703,-2.824 -10.415,-4.007 -4.775,-1.522 -11.355,-4.963 -14.103,-8.105 -4.618,-5.282 -1.13,-18.618 -1.477,-27.471 -3.282,2.331 -6.473,4.75 -11.52,5.317 z m -93.345,37.809 c 7.416,-2.923 15.059,-5.618 20.973,-10.043 -7.239,-4.085 -12.655,-9.992 -18.019,-15.951 -1.016,8.634 -2.797,16.502 -2.954,25.994 z m -29.835,6.499 c -7.016,3.423 -13.585,10.512 -22.192,13.422 -2.154,0.729 -3.793,0.135 -4.689,3.711 1.222,1.973 4.137,1.928 6.499,1.773 9.57,-0.63 20.393,-5.126 29.54,-6.5 0.225,-3.832 0.379,-7.422 0.197,-11.67 -2.731,-0.464 -7.309,-1.734 -9.355,-0.736 z"
id="path15"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 166.224,81.453 c 1.936,2.518 -0.793,5.734 -3.839,4.135 0.048,-0.344 -0.065,-0.526 -0.297,-0.591 0.29,-2.27 1.403,-3.718 4.136,-3.544 z"
id="path17"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 158.249,85.588 c -0.214,1.265 -0.908,2.045 -1.773,2.659 0.62,7.552 8.587,7.759 16.247,8.271 -3.025,6.303 -16.426,9.722 -19.792,1.772 -1.105,-2.613 -0.167,-5.767 0.297,-9.157 -1.041,-1.271 -5.233,-0.809 -4.728,-2.659 2.581,0.588 7.026,0.102 9.749,-0.886 z m 9.672,12.849 c -5.8,-0.6 -11.134,-2.033 -13.512,-6.054 -1.913,8.389 7.679,11.042 13.512,6.054 z"
id="path19"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
<path
d="m 175.381,86.77 c 1.271,2.657 -2.075,5.457 -4.431,3.544 0.048,-0.344 -0.064,-0.526 -0.294,-0.59 0.035,-2.445 2.478,-4.557 4.725,-2.954 z"
id="path21"
inkscape:connector-curvature="0"
style="clip-rule:evenodd;fill-rule:evenodd" />
</g>
</svg>
</div>
<div class="Box">
<img class="Tile" src="http://imgh.us/heart_23.svg" />
</div>
How about using a simple percentage based margins and sizes to scale both svg images accordingly within the fixed containers?
Here's what I came up with:
<div class="box">
<img class="tile left" src="https://imgh.us/lay.svg" />
</div>
<div class="box">
<img class="tile right" src="https://imgh.us/heart_23.svg" />
</div>
And the CSS:
.left {
margin-top: 20%;
margin-left: 25%;
height: 80%;
width: 75%;
}
.right {
height: 100%;
margin-right: 25%;
width: 75%;
}
.box {
float: left;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: grey;
}
Of course, you can change the percentages to your liking. Cheers!
Related
Switch Logo color in Dark Mode issue
I have a black color logo for my portfolio and i would like to switch it white when Dark Mode : https://www.paulinerouger.com/
I have tried:
Using CSS Variables
<img class="nav_logo" src="assets/img/PR_logo.png" alt="original logo" />
body {
--nav_logo: url(PR_logo.png) no-repeat;
}
body[data-theme="dark"] {
--nav_logo: url(PR_logo_white.png) no-repeat;
}
.nav_logo {
background: var(--nav_logo);
}
Using SVG
<img class="nav_logo" src="assets/img/PR_logo.svg" id="svg" alt="PR Logo">
.nav_logo {
fill: currentColor;
}
Unfortunately none of the above has worked.
Any suggestion?
change stroke="#000" in your svg to stroke="currentColor"
body.dark-theme .nav__logo{
color: #FFFFFF;
}
If you are considering a JS-based solution, you can use the approach I developed below. Clicking the toggle button changes both the src attribute of the <img> element and the background-color style of the <body> element.
let button = document.getElementById('toggleButton');
let logo = document.getElementById('logo');
let darkImageURL = "https://cdn-icons-png.flaticon.com/512/196/196685.png";
let lightImageURL = "https://cdn-icons-png.flaticon.com/512/169/169367.png";
button.addEventListener('click', function(event) {
if(this.innerHTML === "Dark") {
document.body.style.background = "black";
this.innerHTML = "Light";
logo.src = darkImageURL;
}
else {
document.body.style.background = "white";
this.innerHTML = "Dark";
logo.src = lightImageURL;
}
});
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100"/>
</body>
You can use css variables with content property for img
document.getElementById('toggleButton').addEventListener('click', function(event) {
if (this.innerHTML === "Dark") {
document.body.dataset.theme = "dark";
this.innerHTML = "Light";
} else {
document.body.dataset.theme = "light";
this.innerHTML = "Dark";
}
});
body {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/169/169367.png');
}
body[data-theme="dark"] {
--nav_logo: url('https://cdn-icons-png.flaticon.com/512/196/196685.png');
}
.nav_logo {
content: var(--nav_logo);
}
<body>
<button id="toggleButton">Dark</button>
<img id="logo" class="nav_logo" src="https://cdn-icons-png.flaticon.com/512/169/169367.png" alt="original logo" width="100" height="100" />
</body>
Svg is just perfect – but wont't work within an <img> element.
You might consider these steps:
optimize your logo svg to inherit colors in a more consistent way
reduce your logo to fixed path elements i.e convert stroked elemnts like the inside bar/pipe to a solid shape/path to avoid accidental strike-width shifts
use an svg <use> concept – providing an <img> like usage i.e providing external svg files as reusable assets.
Example1
stripping hard coded svg properties for better global css styling:
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
* {
box-sizing: border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 375" fill="currentColor">
<path d="M 187.382812 337.265625 C 148.582031 337.265625 112.046875 322.164062 84.628906 294.691406 C 57.152344 267.273438 42.050781 230.738281 42.050781 191.933594 C 42.050781 153.132812 57.152344 116.597656 84.628906 89.179688 C 112.046875 61.703125 148.582031 46.601562 187.382812 46.601562 C 226.1875 46.601562 262.722656 61.703125 290.140625 89.179688 C 317.613281 116.652344 332.714844 153.132812 332.714844 191.933594 C 332.714844 230.738281 317.613281 267.273438 290.140625 294.691406 C 262.722656 322.164062 226.1875 337.265625 187.382812 337.265625 Z M 187.382812 55.316406 C 150.90625 55.316406 116.574219 69.546875 90.785156 95.335938 C 64.996094 121.125 50.765625 155.457031 50.765625 191.933594 C 50.765625 228.414062 64.996094 262.742188 90.785156 288.53125 C 116.574219 314.324219 150.90625 328.554688 187.382812 328.554688 C 223.863281 328.554688 258.191406 314.324219 283.980469 288.53125 C 309.773438 262.742188 324.003906 228.414062 324.003906 191.933594 C 324.003906 155.457031 309.773438 121.125 283.980469 95.335938 C 258.191406 69.546875 223.863281 55.316406 187.382812 55.316406 Z M 187.382812 55.316406"></path>
<path d="M 35.097656 -71.835938 L 8.824219 -71.835938 L 8.824219 0 L 19.292969 0 L 19.292969 -23.910156 L 35.097656 -23.910156 C 50.59375 -23.910156 58.390625 -35.816406 58.390625 -47.820312 C 58.390625 -59.828125 50.59375 -71.835938 35.097656 -71.835938 Z M 35.097656 -34.171875 L 19.292969 -34.171875 L 19.292969 -61.367188 L 35.097656 -61.367188 C 43.820312 -61.367188 48.128906 -54.59375 48.128906 -47.71875 C 48.128906 -40.945312 43.820312 -34.171875 35.097656 -34.171875 Z M 35.097656 -34.171875" transform="translate(97.282 227.676)"></path>
<path d="M 34.996094 -36.429688 L 22.886719 -36.429688 L 22.886719 -31.503906 L 49.054688 0 L 62.496094 0 L 39.816406 -26.988281 C 52.132812 -29.144531 58.390625 -38.792969 58.390625 -48.949219 C 58.390625 -60.34375 50.59375 -72.757812 34.996094 -72.757812 L 8.824219 -72.757812 L 8.824219 0 L 19.085938 0 L 19.085938 -62.292969 L 34.996094 -62.292969 C 43.71875 -62.292969 48.027344 -55.109375 48.027344 -48.949219 C 48.027344 -42.691406 43.71875 -36.429688 34.996094 -36.429688 Z M 34.996094 -36.429688" transform="translate(216.811 227.676)"></path>
<path transform="matrix(0 -9.7441 10.11111 0 187.491 250.21)" d="M -0.0000988013 0.0000885473 L 11.930592 0.0000885473" stroke="currentColor" stroke-width="1"></path>
</svg>
</div>
all path related fill attributes are removed (resulting in a default fill="#000" / black)
svg parent element gets a fill="currentColor" – inherited to all children
the stroke based bar/pipe element gets a stroke="currentColor" rule
Example2
<svg><use href="#..."></svg> also works fine with external files
The next example takes an inlined svg as source but will also work fine with external file references like this (provided, these external files are available on the same domain):
<svg>
<use href="logo.svg#logo-symbol">
</svg>
function toggleDarkmode(){
document.body.classList.toggle('darkmode')
}
*{
box-sizing:border-box;
}
body {
color: #000;
transition: 0.3s;
}
.darkmode {
color: #fff;
background-color: #000;
}
/* just example css – not essential */
.nav__logo .logo {
display: inline-block;
width: 10em;
}
.svgAsset{
position:absolute;
width:0;
height:0;
overflow:hidden;
}
<div class="nav__logo">
<p><button type="button" onclick="toggleDarkmode()">toggleDarkmode</button></p>
<svg class="logo logo-cropped" viewBox="0 0 100 100" >
<use href="#logo-smaller" />
</svg>
</div>
<svg class="svgAsset" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true">
<symbol id="logo-smaller" viewBox="0 0 100 100" fill="currentColor">
<path id="circle" d="M50 100c-27.6 0-50-22.4-50-50c0-27.6 22.4-50 50-50c27.6 0 50 22.4 50 50c0 27.6-22.4 50-50 50zm0-97c-25.9 0-47 21.1-47 47c0 25.9 21.1 47 47 47c25.9 0 47-21.1 47-47c0-25.9-21.1-47-47-47z" />
<path id="P" d="M31.1 37.6l-9 0l0 24.7l3.6 0l0-8.2l5.4 0c5.3 0 8-4.1 8-8.2c0-4.2-2.7-8.3-8-8.3zm0 12.9l-5.4 0l0-9.4l5.4 0c3 0 4.5 2.3 4.5 4.7c0 2.4-1.5 4.7-4.5 4.7z" />
<path id="R" d="M72.2 49.8l-4.2 0l0 1.7l9 10.8l4.6 0l-7.8-9.3c4.2-0.7 6.4-4.1 6.4-7.6c0-3.9-2.7-8.2-8-8.2l-9 0l0 25l3.5 0l0-21.3l5.5 0c3 0 4.5 2.5 4.5 4.6c-0.1 2.1-1.5 4.3-4.5 4.3z" />
<path id="Pipe" d="M51.4 70l-2.8 0l0-40l2.8 0l0 40z" />
</symbol>
</svg>
In the above example, strokes are converted to solid paths – thus you don’t have to bother about styling stroke-colors and fill colors.
»Silverbullet« currentColor?
svg's currentColor value is handy to color svg elements according to their parent elements' (text) color.
E.g. perfectly suited for an inline (icon font like) element behavior.
But you won't see any effect applying fill color values.
Nothing wrong with the fill property
Since fill is reserved for svg elements – you don't have to worry about accidentally overridden styles.
So it might still be a better choice for some elements.
Adding an image inside the cube?
I have found this script which does what I want, the only thing I want to do is insert an image inside the cube.
But I have no idea how to do it.
I haven't seen this format before:
<rect id="region1" x="50" y="0" width="100" height="100"/>
Not sure how to approach it by adding an <img src=""> inside it.
Need help.
EDIT: it's a script that I found. I don't really need the svg part. All I want is to have an image inside the <div></div> and when I click it will execute the CSS and jQuery script...
Here's the code I'm using:
$("rect").click(onRectClick);
$("#sel1").change(onSelectChange);
function onRectClick(evt)
{
// Get the id of the region we clicked on
var regionId = evt.target.id;
// Update the dropdown
$("#sel1").val(regionId);
// Highlight the relevant region
setRegion(regionId);
}
function onSelectChange()
{
// Get selected class from dropdown
var selectedRegion = $("#sel1").val();
// Highlight the relevant region
setRegion(selectedRegion);
}
function setRegion(regionId)
{
// Remove "selected" class from current region
$("rect.selected").removeClass("selected");
// Add "selected" class to new region
$('rect#'+regionId).addClass("selected");
// Note: for addClass() etc to work on SVGs, you need jQuery 3+
}
// Init map based on default select value
onSelectChange();
rect {
fill: #ccc;
stroke: #999;
stroke-width: 2;
cursor: pointer;
}
rect:hover {
fill: #888;
}
rect.selected {
fill: #ff7409;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<svg width="300" height="300">
<rect id="region1" x="50" y="0" width="100" height="100"/>
<rect id="region2" x="150" y="0" width="100" height="100"/>
<rect id="region3" x="0" y="100" width="100" height="100"/>
<rect id="region4" x="100" y="100" width="100" height="100"/>
<rect id="region5" x="200" y="100" width="100" height="100"/>
<rect id="region6" x="50" y="200" width="100" height="100"/>
<rect id="region7" x="150" y="200" width="100" height="100"/>
</svg>
<div>
<label for="sel1">Seleziona Area:</label>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
<option value="region6">6 - S. Paolo / S. Osvaldo</option>
<option value="region7">7 - Chiavris / Paderno</option>
</select>
</div>
Try this,
const containers = $('.image-container')
const select = $('#sel1')
// Initialize at position 1
selectElement('region1')
containers.on('click', function() {
selectElement($(this).attr('id'))
select.val($(this).attr('id'))
})
select.change(function() {
selectElement($(this).val())
})
function selectElement(id) {
let others = containers.not($('#'+id))
$('#'+id).addClass("selected")
others.removeClass("selected")
}
#wrapper .image-container {
position: relative;
width: 100px;
height: 100px;
display: inline-block;
}
#wrapper img {
width: 100px;
height: 100px;
object-fit: cover;
}
.image-container.selected::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4)
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="wrapper">
<div id="region1" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/DEpYy8jSdvD9dkvVDSPNoD.jpg" alt="">
</div>
<div id="region2" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2014/05/star-20wars-20video-20games-20hoth-20atat-20empire-20at-20war-201680x1050-20wallpaper_wallpaperswa.com_551.jpg" alt="">
</div>
<div id="region3" class="image-container">
<img src="https://www.austinchronicle.com/binary/e3fd/AllisonLefcort_CaptainPhasma_Add.jpg" alt="">
</div>
<div id="region4" class="image-container">
<img src="https://cdn.mos.cms.futurecdn.net/ew7hxbJKwPewaRmjYW79bi.jpg" alt="">
</div>
<div id="region5" class="image-container">
<img src="https://www.starwarsnewsnet.com/wp-content/uploads/2021/01/Empire-at-War_wall.jpg" alt="">
</div>
</div>
<select class="form-control" id="sel1">
<option value="region1">1 - Udine Centro</option>
<option value="region2">2 - Rizzi / S. Domenico / Cormor / S. Rocco</option>
<option value="region3">3 - Laipacco / San Gottardo</option>
<option value="region4">4 - Udine sud</option>
<option value="region5">5 - Cussignacco</option>
</select>
Coloring svg using javascript when clicking an arrow to go to the next slide
I have to color SVG when I press red square to change slide, can someone help me?
I can color SVG when I hit, but when I click the red square to go to the next slide I have no idea how to change the color of the SVG so that it matches colored white.
So the final result should be that when I click on the red square the slide changes, SVG turns white together with the pink background
// Script written by #hamzadhamiya for #bloggerever.
// http://bloggerever.com
$(function () {
$.FindContainer = function () {
$('.tab-content>div').each(function findcontent() {
var newindex = $('.activetab').index();
var newheight = $('.activetab').height();
$('.tab-content').animate({
'height': newheight+20
}, 100);
var otherindex = $(this).index();
var substractindex = otherindex - newindex;
var currentwidth = $('.multipletab').width();
var newpositions = substractindex * currentwidth;
$(this).animate({
'left': newpositions
});
});
};
$.FindId = function () {
$('.tab-content>div').each(function () {
if ($(this).attr('id') == $('.active').attr('id')) {
$('.tab-content>div').removeClass('activetab');
$(this).addClass('activetab');
}
});
};
$('.tab-buttons>span').first().addClass('active');
$('.tab-content>div').each(function () {
var activeid = $('.active').attr('id');
if ($(this).attr('id') == activeid) {
$(this).addClass('activetab');
}
var currentheight = $('.activetab').height();
var currentwidth = $('.multipletab').width();
var currentindex = $(this).index();
var currentposition = currentindex * currentwidth;
$(this).css({
'left': currentposition,
'width': currentwidth - 40,
'padding': '10px 20px'
});
$(this).attr('data-position', currentposition);
$('.tab-content').css('height', currentheight+20);
});
$('.tab-buttons>span').click(function () {
$('.tab-buttons>span').removeClass('active');
$(this).addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
});
$('.next').click(function () {
var activetabindex = $('.activetab').index() + 1;
var containers = $('.tab-content>div').length;
if (containers == activetabindex) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').first().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').next();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
$('.prev').click(function(){
var activetabindex = $('.activetab').index();
if (activetabindex == 0) {
$('.tab-buttons>span').removeClass('active');
$('.tab-buttons>span').last().addClass('active');
var currentid = $('.active').attr('id');
$.FindId();
$.FindContainer();
} else {
var currentopen = $('.active').prev();
$('.active').removeClass('active');
currentopen.addClass('active');
$.FindId();
$.FindContainer();
}
});
});
//script che colora il tabs tessuti
document.getElementById("linkTessuti1").classList.add("colorebianco")
function onclickWhite1() {
var color1=document.getElementById("linkTessuti1");
color1.classList.add("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite2() {
var color2=document.getElementById("linkTessuti2");
color2.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor3=document.getElementById("linkTessuti3");
rimuovicolor3.classList.remove("colorebianco");
}
function onclickWhite3() {
var color3=document.getElementById("linkTessuti3");
color3.classList.add("colorebianco");
var rimuovicolor1=document.getElementById("linkTessuti1");
rimuovicolor1.classList.remove("colorebianco");
var rimuovicolor2=document.getElementById("linkTessuti2");
rimuovicolor2.classList.remove("colorebianco");
}
.multipletab{
width:50%;
margin:0 auto;
background:blue;
overflow:hidden;
position:relative;
}
.tab-buttons{
display:inline-block;
width:100%;
border-bottom:2px solid #666;
}
.tab-buttons>span{
display:block;
text-align: center;
float:left;
cursor:pointer;
width: 20%;
background:green;
}
.tab-buttons>span.active{
background:pink;
position:relative;
}
.tab-content{
position:relative;
}
.tab-content>div{
position:absolute;
background-color:yellow;
}
.tab-nav>span{
position:absolute;
top:50%;
cursor:pointer;
display:block;
height:35px;
width:35px;
}
.tab-nav>span.next{
right:10px;
background-color: red;
}
.tab-nav>span.prev{
left:10px;
background-color: red;
}
.colorebianco {
fill: #ffffff!important;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Sliding Multiple Tabs with Arrow navigation</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=PT+Sans'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='multipletab'>
<div class='tab-buttons'>
<span id='content1'>
<svg onclick="onclickWhite1()" id="linkTessuti1" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content2'>
<svg onclick="onclickWhite2()" id="linkTessuti2" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content3'>
<svg onclick="onclickWhite3()" id="linkTessuti3" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content4'>
<svg onclick="onclickWhite4()" id="linkTessuti4" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<span id='content5'>
<svg onclick="onclickWhite5()" id="linkTessuti5" version="1.1" id="Livello_1" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 80 80" enable-background="new 0 0 80 80" xml:space="preserve">
<path d="M40,16c13.23,0,24,10.77,24,24S53.23,64,40,64S16,53.23,16,40S26.77,16,40,16 M40,15c-13.81,0-25,"/>
</svg>
</span>
<!--add more button right after it with same id attribute of that container. Make sure to use span tag.-->
</div>
<div class='tab-content'>
<div id='content1'>
THE CONTENT OF FIRST TAB.THE CONTENT OF FIRST TAB.THE
</div>
<div id='content2'>
This is Second Containter.This is Second Containter.This
</div>
<div id='content3'>
THE CONTENT OF 3RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content4'>
THE CONTENT OF 4RD CONTAINER GOES HERETHE CONTENT OF
</div>
<div id='content5'>
THE CONTENT OF 5RD CONTAINER GOES HERETHE CONTENT OF
</div>
<!--add more container right after it with same id attribute of that button. Make sure to use div tag.-->
</div>
<div class='tab-nav'>
<span class='next'></span>
<span class='prev'></span>
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
You don't need to specifically set the circle to white (class .colorebianco). Instead just add a CSS rule that makes the circle white if it is in the .active span.
.tab-buttons>span.active path {
fill: #ffffff!important;
}
Then everything works automatically for you.
How to overlay Html elements over svg path
I need to place some html elements over my svg path. How can i do that ? I looked up for foreignObject but it only allows for whole svg what about the path sections ? Here is my svg code <svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg"> <g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063"> <path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" data-id="NM" data-name="New Mexico"/> <path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" data-id="OK" data-name="Oklahoma"/> <path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" data-id="TX" data-name="Texas"/> </g> </svg>
You need to find the center of a path in pixels in a resizable svg element. For this you need:
to find the center of a path in svg units
convert the svg units in pixels
repeat on resize
Please read the comments on my code.
In my code the div #label is just a point. If you need to add text to the div you'll need to take in account the width and the height of the div.
// the values of the svg viewBox
svgVB = { x: 0, y: 0, w: 271.87, h: 232.08 };
//the bounding box for the path id="NM"
let BB = NM.getBBox();
//the center of the path in svg units
let center = {};
center.x = BB.x + BB.width / 2;
center.y = BB.y + BB.height / 2;
//the center of the path in html units
let htmlCenter = {};
// a function to get the position of the div
function positionDiv() {
//first get the size and the position of the svg element
let SVGClientRect = svg.getBoundingClientRect();
//calculate the htmlCenter x
htmlCenter.x = map(
center.x,
svgVB.x,
svgVB.w,
SVGClientRect.x,
SVGClientRect.x + SVGClientRect.width
);
//calculate the htmlCenter y
htmlCenter.y = map(
center.y,
svgVB.y,
svgVB.h,
SVGClientRect.y,
SVGClientRect.y + SVGClientRect.height
);
// set the styles for the label
label.style.left = htmlCenter.x + "px";
label.style.top = htmlCenter.y + "px";
}
//call the positionDiv function
positionDiv();
//call the positionDiv function on resize
window.setTimeout(function() {
positionDiv();
window.addEventListener("resize", positionDiv, false);
}, 15);
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}
svg {
border: 1px solid;
}
#label {
width: 5px;
height: 5px;
border-radius: 50%;
background: red;
position: absolute;
}
<svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg">
<g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063">
<path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" id="NM" data-name="New Mexico"/>
<path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" id="OK" data-name="Oklahoma"/>
<path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" id="TX" data-name="Texas"/>
</g>
</svg>
<div id="label"></div>
You need to add an id to your path <path id="my-text" .......... /> aftet that, inside your svg tags put: <text> <textPath xlink:href="#text">text on a path</textPath> </text> you use the same id you used for that path in the href="" Hope this helps! this article also may help you out! https://vanseodesign.com/web-design/svg-text-on-a-path-part-1/ for putting elements in your svg: The only way i found was using <foreignObject> example: <svg> .... .... <foreignObject> <div> your content</div> </foreignObject> </svg> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject this article can you more about that. There are ways yo position with x and y attributes.
Hover on svg for affecting the other element property doesn't work
HTML:
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div class="theContainer">bg-color</div>
</div>
CSS:
.myPoint:hover + .theContainer {
background-color: black;
}
Problem: When i am hovering on the blue svg circle the background-color should be displayed on the text, but with svg it doesn't work. What is the problem? what do i need to do?
The demo: http://jsfiddle.net/wy6y66ox/
This has nothing to do with SVG per se. + is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. Because .myPoint is not a sibling of .theContainer your selector will not work. You would need javascript in this instance.
Paulie_D is right.You have to use Javascript.
HTML
<div>
<svg class="velveti-grid-point" width="100" height="100" style="height: 120px; width: 625px;">
<circle id="svgid" class="myPoint" cx="500" cy="105" r="5" fill="#80E1EE" />
</svg>
<div id="divcolor" class="theContainer">bg-color</div>
</div>
JS
var svg = document.getElementById( 'svgid' );
var div = document.getElementById( 'divcolor' );
svg.onmouseover = function() {
div.style.backgroundColor = 'blue';
};
svg.onmouseout = function() {
div.style.backgroundColor = 'transparent';
};
Demo Here