我想要一个看起来与待售网页几乎相同的动态网页:
所以我购买并实现了 US state map但它在我的网页上变得太小:
我希望 map 更大。如何做呢？ entire code很大，所以我取出了显示 map 的相关部分，并从此代码块中取出了所有 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" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" 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 map 上的状态选择，所以我们得到了这个符合要求的 SVG map ，只是它的渲染太小了。您能给我一个提示，我应该在哪里进行更改以使 map 的默认渲染更大吗？是 CSS 还是 HTML？我从 map 制造商那里获得的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:hover{text-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;}
}
在 Internet Explorer 中， map 很大，我的页面几乎是正确的，只是 map 不在左侧，它位于州列表下方:
更新
Fiddle通过问题的独立示例，我相信正在发生的事情是我的 CSS 正在隐藏自身。
更新2
我已经设法从头开始并调整 map 大小，但我不完全理解为什么将 viewBox 属性的最后两个参数加倍实际上会使 map 变小。我现在得到的开始看起来可以接受:
最佳答案
一般来说，您需要为 SVG 设置 viewBox="…" 属性来绑定(bind)您的内容，然后根据需要缩放 SVG 元素。
演示
请注意，我有一个无版权的优化美国 SVG map :http://phrogz.net/SVG/USMap.svg
关于html - 如何使我的 SVG map 在浏览器中正确渲染？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16974661/