SVG doesnt fill container

HTML & CSS
1

The SVG (world map) at
http://lukesspot.com/indus_links/map.html
is having an issue where it doesn’t seem to be stretching correctly on the right side (shouldn’t it stretch since I set the width to 100%?
How do I get this effect?

2

In my browser, the SVG is filling the entire DIV at 1110 px.

This might be a browser-specific issue you’re seeing?

3

Can’t seem to access that link:



ERR_NETWORK_ACCESS_DENIED
4

This is the beginning of his <svg> and a very long list of paths:

<svg xmlns="http://www.w3.org/2000/svg" width="1009.6727" height="665.96301">
<defs>
<style>
svg { background-color:#efefee; } path { fill:#5e5e5d } path.region { stroke-width:.4; stroke:white; fill:#8a9da7 } path.region:hover { fill:#798e9a }
</style>
</defs>
<path id="AD" d="m 479.68275,331.6274 -0.077,0.025 -0.258,0.155 -0.147,0.054 -0.134,0.027 -0.105,-0.011 -0.058,-0.091 0.006,-0.139 -0.024,-0.124 -0.02,-0.067 0.038,-0.181 0.086,-0.097 0.119,-0.08 0.188,0.029 0.398,0.116 0.083,0.109 10e-4,0.072 -0.073,0.119 z" title="Andorra">
<path id="AE" d="m 632.89475,388.8674 0.184,0.251 0.026,1.701 0.042,0.121 -0.098,0.018 -0.11,0.129 -0.129,0.199 -0.177,0.103 -0.142,0.116 -0.134,0.144 -0.12,0.031 -0.155,-0.183 -0.107,-0.187 0.026,-0.041 0.075,-0.013 0.028,-0.097 -0.045,-0.14 -0.105,-0.053 -0.132,-0.004 -0.127,0.063 -0.135,0.124 -0.076,0.133 -0.011,0.267 0.035,0.3 -10e-4,0.146 -0.074,0.181 -0.026,0.266 0.053,0.206 0.048,0.123 0.005,0.104 -0.126,0.328 0.109,0.062 0.361,0.023 0.106,0.222 0.072,0.152 -0.02,0.09 -0.256,0.067 -0.322,0.074 -0.231,-0.021 -0.418,0....165 0.083,0.014 0.116,-0.083 z m -5.096,2.438 -0.025,0.06 -0.079,-0.005 -0.198,-0.054 -0.064,-0.086 0.124,-0.103 0.055,-0.005 0.079,0.108 0.108,0.085 z m -3.181,0.564 -0.208,0.017 -0.188,-0.116 0.397,-0.155 0.107,-0.07 0.116,-0.143 0.093,0.123 -0.103,0.193 -0.073,0.083 -0.141,0.068 z m -2.008,-0.091 -0.047,0.022 -0.05,-0.165 0.003,-0.052 0.129,-0.075 0.079,0.135 -0.114,0.135 z m 3.679,0.34 10e-4,0.104 -0.285,-0.03 -0.076,0.054 -0.234,-0.03 -0.229,-0.075 0.155,-0.125 0.404,-0.147 0.168,0.134 0.096,0.115 z" title="United Arab Emirates">
etc.
5

is there something wrong with the link, its working for me…

image
image5760×1080 845 KB

6

Seems to be my Firewall/Virus protection but it won’t let me access that link in any of my browsers on windows 10.

My imac is showing the link OK so must be Mcaffee on the PC blocking it for some reason (or some windows firewall). Can’t really explain it unfortunately.

7

I believe you need to set the viewbox so that you can scale svg correctly.

1 Like
9

Something like this seems to work but read the link I gave you before to double check.

svg {
	width: 100%;
	height:auto;
}

 <div class="tab-info"> <svg
   xmlns="http://www.w3.org/2000/svg"
   width="1009.6727"
   height="665.96301"
   viewBox="0 0 1009 665"
>
      <defs>

That seems to allow it to scale up and down ok in Edge, Chrome and Firefox. If you need IE11 support you’ll probably need to use the padding-hack version mentioned here.

Bear in mind I’m also unfamiliar with the vagaries of inline svgs :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.