如何让我的 SVG 地图在浏览器中正确呈现？
Posted
技术标签:
【中文标题】如何让我的 SVG 地图在浏览器中正确呈现？【英文标题】：How to make my SVG map render correctly in the browser? 【发布时间】：2013-06-07 01:01:04 【问题描述】：我想要一个看起来与待售网页几乎相同的动态网页：
所以我购买并实施了US state map，但它在我的网页上变得太小了：
我希望地图更大。如何做呢？ entire code 很大，所以我取出了显示地图的相关部分，并从该代码块中取出了所有 SVG 数据
<html dir="ltr" lang="en-IN" class="js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="keywords" content="Houses Apartments, Vacation homes, Offices, Land, Flatmates,Paying Guest, Other real estate, Cars, Motorcycles, Accessories parts, Trucks, Other vehicles, Home Garden, Clothing, For Kids (Toys Clothes), Jewelry Watches, Hobbies, Sports Bicycles, Movies, Books Magazines, Pets, Tickets, Art Collectibles, Music Instruments, Computers Accessories, TV, Audio, Video, Cameras, Cellphones gadgets, Video games consoles, Job offers, Resumes, Services, Classes, Professional,Office equipment, Other, ">
<meta name="description" content="Find jobs, cars, houses, mobile phones and properties for sale in your region conveniently. Find the best deal among count free ads online!">
<title>Free classifieds in India - HipHeap.com</title>
<!-- CSS INCLUDES: -->
<link href="/static/india_files/index_in.css?234" rel="stylesheet" type="text/css">
<!--[if lt IE 9.]>
<script type="text/javascript" src="http://content.hipheap.com/js/3e233f78542ce91af211f0d166/html5shiv.js"></script>
<![endif]-->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="prerender" href="/">
<link rel="prefetch" href="/">
<!-- JAVASCRIPTS: -->
</script><script type="text/javascript" src="/static/1_files/jquery-1.js"></script> <link href="/static/css/index_usa.css?978923487" rel="stylesheet" type="text/css">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="/static/1_files/common_us.css?9823476" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="/static/theCss.css" />
<script src="/static/jquery.min.js" type="text/javascript"></script>
<script src="/static/us2Config.js" type="text/javascript"></script>
<script src="/static/theJava.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
addEvent('map_1');
addEvent('map_2');
addEvent('map_3');
addEvent('map_4');
addEvent('map_5');
addEvent('map_6');
addEvent('map_7');
addEvent('map_8');
addEvent('map_9');
addEvent('map_10');
addEvent('map_11');
addEvent('map_12');
addEvent('map_13');
addEvent('map_14');
addEvent('map_15');
addEvent('map_16');
addEvent('map_17');
addEvent('map_18');
addEvent('map_19');
addEvent('map_20');
addEvent('map_21');
addEvent('map_22');
addEvent('map_23');
addEvent('map_24');
addEvent('map_25');
addEvent('map_26');
addEvent('map_27');
addEvent('map_28');
addEvent('map_29');
addEvent('map_30');
addEvent('map_31');
addEvent('map_32');
addEvent('map_33');
addEvent('map_34');
addEvent('map_35');
addEvent('map_36');
addEvent('map_37');
addEvent('map_38');
addEvent('map_39');
addEvent('map_40');
addEvent('map_41');
addEvent('map_42');
addEvent('map_43');
addEvent('map_44');
addEvent('map_45');
addEvent('map_46');
addEvent('map_47');
addEvent('map_48');
addEvent('map_49');
addEvent('map_50');
addEvent('map_51');
)
</script>
<style>
.unselectable
-moz-user-select:none;
-webkit-user-select:none;
</style>
<style>
p.pos_fixed
position:fixed;
left:15px;
</style>
</head>
<!--[if IE 6 ]> <body name="body" class=" ie ie6 not-ie7 not-ie8 not-ie9 "> <![endif]-->
<!--[if IE 7 ]> <body name="body" class=" ie ie7 not-ie6 not-ie8 not-ie9 "> <![endif]-->
<!--[if IE 8 ]> <body name="body" class=" ie ie8 not-ie6 not-ie7 not-ie9 "> <![endif]-->
<!--[if IE 9 ]> <body name="body" class=" ie ie9 not-ie6 not-ie7 not-ie8 "> <![endif]-->
<!--[if !IE]>--><body name="body" class=" not-ie6 not-ie7 not-ie8 not-ie9 not-ie"><!--<![endif]-->
<div class="topbar">
<div class="topbar-inner nohistory">
<div class="topbar-left">
<a class="topbar-new" href="https://www.hipheap.com/account/create"><strong>New!</strong> All your ads and saved searches in one place, create an account today!</a>
</div>
<div class="topbar-right">
<a class="topbar-login last" href="https://www.hipheap.com/account/login" title="Login to your account" rel="nofollow">
<i class="sprite_common_topbar_log-in topbar-float_left"></i>
Log in
</a>
<a class="topbar-create first" href="https://www.hipheap.com/account/create" title="Create your account" rel="nofollow">
<i class="sprite_common_topbar_logged-in topbar-float_left"></i>
Create account
</a>
</div>
</div>
</div>
<div id="wrapper">
<!--[if lt IE 7]>
<div class="alert-outer alert-error">
<a href="#" class="alert-closer" title="close this alert" onclick="removeIeNotification(this); return false;">×</a>
<div class="alert-inner">
<span><strong>You are using an outdated version of Internet Explorer.</strong> For a faster, safer browsing experience, upgrade today!</span>
</div>
</div>
<![endif]-->
<header>
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">hipheap.com - The right choice for buying & selling in india</h1>
<div id="post">
<a href="/ai" id="ad">Post your ad for free</a>
</div>
</header>
<div class="main">
<div class="column_left">
<div class="box">
<h2>High quality classifieds near you</h2>
<ul><li>HipHeap is safe, easy, and free.</li>
<li>Buy and sell <a href="/india/cars-for_sale">cars</a>, check our <a href="/india/real_estate">real estate</a> section, find <a href="/india/jobs">jobs</a>, and much more.</li>
<li>Check our <strong><a href="/india">count ads online</a></strong> and find what you are looking for in your region or in all India.</li></ul>
</div>
<div id="regions">
<div class="region_links_one">
<ul class="regions_one">
<li><a id="region_8" class="region" href="/q?query=regionID%3D4694186">Alabama</a></li>
<li><a id="region_9" class="region" href="/q?query=regionID%3D4699188">Alaska</a></li>
<li><a id="region_10" class="region" href="/q?query=regionID%3D4692186">California</a></li>
</ul>
<ul class="regions_two">
<li><a id="region_22" class="region" href="/q?query=regionID%3D4694184">Kentucky</a></li>
</ul>
</div>
<div class="region_links_two">
<h2>Union territories</h2>
<ul class="regions_one">
<li><a class="region" href="/q?query=regionID%3D4699183">Delhi</a></li><li><a class="region" href="/q?query=regionID%3D4700189">Lakshadweep</a></li><li><a class="region" href="/q?query=regionID%3D4704183">Daman & Diu</a></li><li><a class="region" href="/q?query=regionID%3D4691190">Dadra & Nagar Haveli</a></li>
</ul>
<ul class="regions_two">
<li><a class="region" href="/q?query=regionID%3D4704183">Chandigarh</a></li><li><a class="region" href="/q?query=regionID%3D4676189">Pondicherry</a></li><li><a class="region" href="/q?query=regionID%3D4703187">Andaman & Nicobar Islands</a></li>
</ul>
</div>
</div>
</div>
<div id="mapcontainer">
<!-- map code -->
<div id="map_base">
<span class="tip" id="tip"></span>
<div onselectstart="return false;" class="unselectable" >
<!-- the svg code starts here -->
</div>
</div>
<div id="likebtn">
<iframe class="fb_iframe" tabindex="-1" scrolling="no" frameborder="0" allowtransparency="true" src="./static/india_files/like.html"></iframe>
</div>
<div class="google_plus">
<!--[if gt IE 7]>
<div id="google_plus1btn"><g:plusone size="medium" href="https://www.hipheap.com"></g:plusone></div>
<script type="text/javascript">
window.___gcfg = lang: '';
(function()
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
)();
</script>
<![endif]-->
<!--[if !IE]><!-->
<div id="google_plus1btn"><div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;"><iframe frameborder="0" hspace="0" margin margin scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_137051343457799865" name="I0_13703434517799865" src="./static/india_files/fastbutton.html" allowtransparency="true" data-gapiattached="true" title="+1"></iframe></div></div>
<script type="text/javascript">
window.___gcfg = lang: '';
(function()
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
)();
</script>
<!--<![endif]-->
</div>
</div><footer class="nohistory columns">
<div class="widecolumn">
<p class="first">A good deal is just around the corner!</p>
<p>HipHeap is the right choice for safe buying and selling in India: a free classifieds website where you can buy and sell almost everything.</p>
<p><a href="/ai">Post an ad for free</a> or browse through our categories. You will find thousands of free classifieds for cars, houses, mobile phones and gadgets, computers, pets and dozens of items and services in your state or union territory.</p>
<p class="last"><strong>HipHeap does not charge any fee and does not require registration.</strong> Every ad is checked so we can give you the highest quality possible for the ads on our site. That’s why HipHeap is the most convenient, easiest to use and most complete free ads site in India.</p>
</div>
<aside>
<nav class="navbar ">
<a class="first" href="/customer_service.htm">
<i class="sprite_common_customer_service"></i>
<span>Customer Service</span>
</a><!--
<a href="/security/index.htm">
<i class="sprite_common_security"></i>
<span>Shop safely</span>
</a>
<a href="/rules.htm">
<i class="sprite_common_rules"></i>
<span>Rules</span>
</a>
<a href="/about.htm">
<i class="sprite_common_about_footer_in"></i>
<span>About HipHeap.com</span>
</a>
<a href="/copyright.htm">
<i>©</i>
<span>Kool Ventures</span>
</a>-->
<a href="https://www.facebook.com/hipheap" target="_blank">
<i class="sprite_common_facebook"></i>
<span>Follow us on Facebook</span>
</a>
</nav>
</aside>
<div id="world_sites">
<p>
Travelling abroad? Visit our classifieds sites in other countries. See:<br>
<a href="http://www.montao.com.br/" target="_blank">Montao</a>,
</p>
</div>
</footer>
<div id="scripts">
<!-- NO SCRIPTS -->
</div>
</div><!-- / #wrapper -->
</body></html>
我是 SVG 的新手，代码很大，我获得了它，所以我不太熟悉页面中实现的内容，它应该是 HTML 5 地图上的状态选择，所以我们得到了这个符合要求的 SVG 地图，只是它的渲染太小了。您能否给我一个提示，我应该在哪里更改以使地图的默认渲染更大？是 CSS 还是 HTML？我从地图制造商那里获得的 CSS 是：
/* reset */
form display:block; margin:0; padding:0; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements structure element */dl, dt, dd, ul, ol, li, /* list elements list element */pre, /* text formatting elements text format element */fieldset, lengend, button, input, textarea, /* form elements */th, td /* table elements */ margin: 0; padding: 0; table th,table td padding:1px /* */body,button, input, select, textarea /* for ie */ /*font: 12px/1 Tahoma, Helvetica, Arial, sans-serif;*/ font: 12px/1 arial,verdana,tahoma,sans-serif; /* */h1 font-size: 18px; /* 18px / 12px = 1.5 */ h2 font-size: 16px; h3 font-size: 14px; h4, h5, h6 font-size: 100%; address, cite, dfn, em, var font-style: normal; /* */code, kbd, pre, samp, tt font-family: "Courier New", Courier, monospace; /* */small font-size: 12px; /* *//* */ul, ol list-style: none; /* */a text-decoration: none; color:#049;a:hover text-decoration: underline; abbr[title], acronym[title] /* ：1.ie6 abbr; 2.，ie6 */ border-bottom: 1px dotted; cursor: help;q:before, q:after content: ''; /* */legend color: #000; /* for ie6 */fieldset, img border: none; /* img *//* ：optgroup */button, input, select, textarea font-size: 100%; /* *//* */table border-collapse: collapse; border-spacing: 0;/* hr */hr border: none; height: 1px; .clear clear:both;
a:hovertext-decoration: none;
#wrapper
max-width:1920px;
margin:0 auto;
padding:0px 0;
background-color:#f8edcd;
min-width:220px;
@media screen and (max-width: 240px)
svg
height:150px;
width:98%;
margin:0px;
#msg_box
position: relative;
width:98%;
margin:0px;
#msg_title
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
height:150px;
padding:2%;
@media screen and (max-width: 320px) and (min-width: 241px)
svg
height:204px;
width:98%;
margin:0px;
#msg_box
position: relative;
width:98%;
margin:0px;
#msg_title
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
height:170px;
padding:2%;
@media screen and (max-width: 400px) and (min-width: 321px)
svg
height:256px;
width:98%;
margin:0px;
#msg_box
position: relative;
width:98%;
margin:0px;
#msg_title
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
height:168px;
padding:2%;
@media screen and (max-width: 480px) and (min-width: 401px)
svg
height:310px;
width:98%;
margin:0px;
#msg_box
position: relative;
width:98%;
margin:0px;
#msg_title
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
height:190px;
padding:2%;
@media screen and (max-width: 568px) and (min-width: 481px)
svg
height:370px;
width:98%;
margin:0px;
#msg_box
position: relative;
width:98%;
margin:0px;
#msg_title
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
height:190px;
padding:2%;
@media screen and (max-width: 685px) and (min-width: 569px)
svg
height: 280px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:210px;
padding:2%;
@media screen and (max-width: 768px) and (min-width: 686px)
svg
height: 320px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:240px;
padding:2%;
@media screen and (max-width: 1024px) and (min-width: 769px)
svg
height: 424px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:318px;
padding:2%;
@media screen and (max-width: 1280px) and (min-width: 1025px)
svg
height: 530px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:400px;
padding:2%;
@media screen and (max-width: 1600px) and (min-width: 1281px)
svg
height: 674px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:506px;
padding:2%;
@media screen and (min-width: 1601px)
svg
height: 842px;
float:left;
width:64%;
#msg_box
float:left;
position: relative;
width:36%;
#msg_title
width:80%;
margin:0 auto;
min-height:25px;
#msg_data
margin:15px auto 5px;
width:90%;
height:632px;
padding:2%;
.tip
display:none;
padding:5px;
border:1px solid #EBECED;
color:#edeef0;
font-weight: bold
;z-index:1000;
float:left;
position:absolute;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#656565'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#494949', endColorstr='#656565')"; /* IE8 */
background: -moz-linear-gradient(top, #494949,#656565); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#494949), to(#656565));
word-break:keep-all;
white-space:nowrap;
#msg_title
border:1px solid #999;
font-weight:bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius:8px;
box-shadow:1px 2px 4px #999;
-moz-box-shadow:1px 2px 4px #999;
-webkit-box-shadow:1px 2px 4px #999;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:21px;
text-align: center;
padding:10px;
line-height: 25px;
color:#333;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd')"; /* IE8 */
background: -moz-linear-gradient(top, #ffffff,#dddddd); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
#msg_data
line-height: 26px;
background:#e5e5e5;
border:1px solid #999;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius:6px;
box-shadow:1px 2px 8px #999;
-moz-box-shadow:1px 2px 8px #999;
-webkit-box-shadow:1px 2px 8px #999;
overflow: auto;
word-wrap:break-word;
font-size:18px;
text-align: left;
color:#333;
/*gradient color*/
background:#000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd')"; /* IE8 */
background: -moz-linear-gradient(top, #ffffff,#dddddd); /* Firefox */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#dddddd));
body background-color:#b0c4de;
n Internet Explorer，地图很大，我的页面几乎是正确的，只是地图不在左边，它在州列表下方：
更新
Fiddle 带有自包含的问题示例，我相信正在发生的事情是我的 CSS 正在隐藏自己。
更新 2
我已经设法从头开始并调整地图大小，但我不完全理解为什么将viewBoxattribute 的最后两个参数加倍实际上会使地图更小。我现在得到的开始看起来可以接受了：
【问题讨论】：
【参考方案1】：一般来说，您希望为您的 SVG 设置 viewBox="…" 属性来绑定您的内容，然后根据需要缩放 SVG 元素。
演示
http://jsfiddle.net/Jq3gy/5/ http://jsfiddle.net/Jq3gy/2/请注意，我有一个无版权优化的美国 SVG 地图可用：http://phrogz.net/SVG/USMap.svg
【讨论】：
我试过这个<svg width="100%" heigth="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 540 360" xml:space="preserve"> 但它不起作用。
好的，这是解决问题的问题jsfiddle.net/vxNpF/3 我认为正在发生的事情是 CSS 隐藏了变量。我尝试对问题进行自足的摆弄，并在此处提供链接。感谢您的帮助。
对不起，也许我应该更明确一点：你应该创建一个精简的测试用例。删除不相关的标记和 CSS（其中大部分）。如果您可以删除一行或一个单词，但问题仍然存在，那么您还没有减少足够的内容。
好的，我正在削减它，并将更新一个解决问题的小提琴。谢谢你的帮助。【参考方案2】：
您的 CSS 将高度设置为 674 像素（至少在我的屏幕上），宽度设置为其父容器 (#mapcontainer) 的 64%。原来这是一个又高又窄的形状。浏览器正在缩放地图以适应那个狭窄的容器，这使它看起来很小（至少在 Chrome 上）。
尝试以下方法：
找出#mapcontainer 没有使用所有可用空间的原因。 确保 #mapcontainer 具有与 SVG 视图框 (540:360) 相似的纵横比。 不要尝试更改 SVG 的宽度和高度，只需将其保持为 100% 并让它填满容器即可。 使用<object> 元素嵌入SVG 可能会更幸运。而不是使用内联 SVG。如果其他方法都失败了，请尝试。
【讨论】：
以上是关于如何让我的 SVG 地图在浏览器中正确呈现？的主要内容，如果未能解决你的问题，请参考以下文章