以HTML格式显示完整大小的SVG地图

时间:2018-03-06 09:34:25

标签: html svg

我想将SVG地图添加到HTML文件中。我从这里https://www.amcharts.com/svg-maps/?map=monaco下载了一张简单的摩纳哥地图,结果如下:

https://www.w3schools.com/code/tryit.asp?filename=FP490ZSFQIPR

问题是我可以看到全宽而不是高度(两者都设置为100%)。

我应该改变什么?

1 个答案:

答案 0 :(得分:0)

style="height:100vh;"

等样式添加高度
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" style="height:100vh">
    <g>
        <path id="MC" title="Monaco" class="land" d="M724.14,0L741.93,26.05L699.97,69.67L594.33,110.1L561.42,104.46L513.35,192.63L494.39,286.95L437.78,361.31L402.07,397.76L362.34,367.36L342.89,377.89L301.62,439.61L94.68,620.1L101.07,727.21L39.79,748.22L0.41,803.1L246.9,976.21L388.52,861.09L347.28,876.34L325.2,829.36L267.34,836.14L266.1,820.27L250.24,821.19L247.86,787.51L261.95,782.76L220.98,776.99L251.06,754.05L294.18,792.09L328.35,781.97L358.64,843.09L358.01,809.09L395.22,808.79L484.22,743.44L499.63,686.87L598.91,557.58L519.64,640.14L474.6,609.61L484.85,657.76L404.58,681.07L403.28,653.48L389.69,655.83L402.28,681.7L382.7,687.29L352.38,641.69L350.6,624.46L360.56,641.8L369.48,620.86L376.88,639.99L367.89,592.96L367.46,613.48L351.95,597.36L348.46,617.23L338.17,558.47L413.28,536.47L431.57,537.83L435.82,559.23L432.35,533.8L460.08,530.14L476.79,580.45L469.79,532.07L521.53,517.41L546.71,556.84L529.23,514.1L559.2,449.29L558.08,394.28L635.5,253.91L617.99,255.21L623.11,222.52L647.19,210.59L656.24,222.11L647.32,208.24L671.59,182.64L693.71,183.41L687.61,199.79L698.92,199.17L714.82,153.54L749.66,202.33L799.59,192.29L786.52,103.13L761.18,85.75L767.21,21.13L724.14,0z"/>
    </g>
</svg>