Question

我有这种扭曲的SVG，它描绘了欧洲的形象。这是许多令人讨厌的行为的结果。我对SVG不太好，或者......

在其基本要素中，代码是这样的：

<script type="text/javascript">
 <!-- compute the image dimensions, proposed code -->
 var w = window;
 var d = document;
 var e = d.documentElement;
 var g = e.getElementsByTagName('body')[0];
 var x = w.innerWidth || e.clientWidth || g.clientWidth;
 var y = w.innerHeight|| e.clientHeight|| g.clientHeight;
 var eurlen = Math.min(x, y);
 <!-- end proposed code -->
</script>
<svg
   id="europe-svg"
   display: block
   align: xMidYMid
   width="300%"
   height="300%">
  <g
 id="layer1"
 transform="translate(-107.76319,-174.21562)">
<path>...</path>  <!-- one of these for each country -->
<rect
   style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:8.37237263;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"
   id="rect10148"
   width="452.38409"
   height="447.94937"
   x="106.52205"
   y="174.79648" />
  </g>
</svg>

我希望图像显示全帧。我可以计算出我想要的长度（参见上面的建议代码）。

但是我很难将这种噩梦般的憎恶扩大到视口大小。首先，这是因为我不清楚如何将javascript变量值插入svg高度/宽度和（最后）rect高度/宽度。但也因为当我手动修改这些值时，图像根本没有对我有意义的反应。

任何建议，除了避免机器生成的SVG，后来手工修改并继承？

Answer 1

您需要完成几个步骤：

使容器的宽度和高度全宽，使svg全宽和高度，这里是CSS：

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

然后，从svg元素中删除width和height属性，添加viewBox属性，将其与svg的内容相匹配（我不确定你的图纸大小，放点东西像viewBox="0 0 400 400"一样开始）。那会让你开始

哦，并从身体上移除边距：

body {
   margin: 0
}

全视口的SVG图像

1 个答案: