改变svg地图的大小和位置

Question

我有一张我的国家的地图，我试着调整它的大小，以免占用屏幕上那么大的空间，但出于某种原因，每当我尝试这样做时，地图的一部分就会被抹去，就好像一个方块已经移除了那个区域一样，有人知道如何修复吗？

http://mapsvg.com“

xmlns:dc="http://purl.org/dc/elements/1.1/“

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“

mapsvg:geoViewBox="-90.125247 14.450692 -87.683841 13.152442“

width="792.89117“

height="431.65646">

Answer 1

您可以使用css编辑位置和大小。

svg { width: 100px; height: 200px;}

(使svg 100x200 px)

Answer 2

使用svg div 容器定位图像的大小和位置

在本例中，我使用了内联svg元素来说明如何使用样式化的容器div来定位和调整svg图像的大小(您的图像不会加载到代码片段工具中，因此我使用了自己的任意图像)。

该图像的维度(指定为svg开始标记的属性)为1200,840 of，如果在无约束容器之外使用，则以该大小呈现。

图像元素位于类div元素的.container中。容器的样式设置为样式表中所需的大小(在本例中为200x140px，保持原始图像大小的高宽比)。在样式表中，svg元素对于width和height都是100%大小的(它们相对于容器)。

页面上的位置由容器的位置决定。在本例中，我将主体设置为一个flex容器，并将其内容调整为flex(以将容器及其图像推送到视图的右侧)。

这种方法适用于任何内联svg元素，并且是可靠的。

​

body {
  display: flex;
  justify-content: flex-end;
}

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

div.container {
border: 1px solid red;
width: 200px;
height: 140px;
}

<div class="container">
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* <svg id="l2khr5eg" version="1.1" width="1200" height="840" viewBox="0 0 120 84" xmlns="http://www.w3.org/2000/svg"><rect x="12" y="72.67826086956522" width="6.4" height="2.921739130434782" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>0.87% of total</title></rect><rect x="18.4" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>1.75% of total</title></rect><rect x="24.8" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>1.75% of total</title></rect><rect x="31.200000000000003" y="63.91304347826088" width="6.4" height="11.686956521739129" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>3.5% of total</title></rect><rect x="37.6" y="58.069565217391315" width="6.4" height="17.530434782608697" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>5.26% of total</title></rect><rect x="44" y="55.14782608695653" width="6.4" height="20.45217391304348" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>6.14% of total</title></rect><rect x="50.400000000000006" y="49.30434782608697" width="6.4" height="26.29565217391304" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>7.89% of total</title></rect><rect x="56.800000000000004" y="37.617391304347834" width="6.4" height="37.982608695652175" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>11.4% of total</title></rect><rect x="63.2" y="31.773913043478274" width="6.4" height="43.826086956521735" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>13.15% of total</title></rect><rect x="69.6" y="8.400000000000006" width="6.4" height="67.2" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>20.17% of total</title></rect><rect x="76" y="40.539130434782614" width="6.4" height="35.060869565217395" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>10.52% of total</title></rect><rect x="82.4" y="43.46086956521739" width="6.4" height="32.139130434782615" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>9.64% of total</title></rect><rect x="88.80000000000001" y="63.91304347826088" width="6.4" height="11.686956521739129" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>3.5% of total</title></rect><rect x="95.2" y="66.83478260869566" width="6.4" height="8.765217391304349" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>2.63% of total</title></rect><rect x="101.60000000000001" y="69.75652173913045" width="6.4" height="5.843478260869564" stroke="black" stroke-width="0.2px" fill="brown" class="bar"><title>1.75% of total</title></rect><text text-anchor="start" x="12" y="3.3600000000000003" font-size="5.04" font-family="Arial" fill="black" font-weight="lighter">my data distribution</text><line x1="12" y1="75.60000000000001" x2="12" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="18.4" y1="75.60000000000001" x2="18.4" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="24.8" y1="75.60000000000001" x2="24.8" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="31.200000000000003" y1="75.60000000000001" x2="31.200000000000003" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="37.6" y1="75.60000000000001" x2="37.6" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="44" y1="75.60000000000001" x2="44" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="50.400000000000006" y1="75.60000000000001" x2="50.400000000000006" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="56.800000000000004" y1="75.60000000000001" x2="56.800000000000004" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="63.2" y1="75.60000000000001" x2="63.2" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="69.6" y1="75.60000000000001" x2="69.6" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="76" y1="75.60000000000001" x2="76" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="82.4" y1="75.60000000000001" x2="82.4" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="88.80000000000001" y1="75.60000000000001" x2="88.80000000000001" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="95.2" y1="75.60000000000001" x2="95.2" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="101.60000000000001" y1="75.60000000000001" x2="101.60000000000001" y2="76.944" stroke="black" stroke-width="0.4px"/><line x1="108" y1="75.60000000000001" x2="108" y2="76.944" stroke="black" stroke-width="0.4px"/><text text-anchor="middle" x="12" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-1</text><text text-anchor="middle" x="18.4" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.9</text><text text-anchor="middle" x="24.8" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.8</text><text text-anchor="middle" x="31.200000000000003" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.7</text><text text-anchor="middle" x="37.6" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.6</text><text text-anchor="middle" x="44" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.5</text><text text-anchor="middle" x="50.400000000000006" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.4</text><text text-anchor="middle" x="56.800000000000004" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.3</text><text text-anchor="middle" x="63.2" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.2</text><text text-anchor="middle" x="69.6" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">-0.1</text><text text-anchor="middle" x="76" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0</text><text text-anchor="middle" x="82.4" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.1</text><text text-anchor="middle" x="88.80000000000001" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.2</text><text text-anchor="middle" x="95.2" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.3</text><text text-anchor="middle" x="101.60000000000001" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.4</text><text text-anchor="middle" x="108" y="81.312" font-size="2.016" font-family="Arial" fill="black" font-weight="lighter">0.5</text></svg></div>
*/

​