Question

我试图为svg图像添加固定宽度和高度（1920px宽度和670px高度），但我没有成功。我不想要一个响应式svg但只显示居中的内容。

<div class="map" style="width:1920px;height:670px;">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%">    
    <g id="conseils" class="dark"><polygon class="st0" points="29.4,12.8 31.8,33.6 59.9,35.5 59.6,5.2 "/></g>
    <g id="brand"><polyline class="st0" points="59.6,5.2 87.1,12.3 83.5,33.6 59.9,35.5 59.6,5.2 "/></g>
    <g id="cm"><polygon class="st0" points="83.5,33.6 87.1,12.3 108,6.2 109.7,35.1 "/></g>
    <g id="data"><polyline class="st0" points="136,36.3 109.7,35.1 111,58.5 137.2,53.9 136,36.4 "/></g>
    <g id="paid"><polygon class="st0" points="108,6.2 109.7,35.1 136,36.3 132.4,11.2 "/></g>
    <g id="crm"><polygon class="st0" points="109.7,35.1 83.5,33.6 83.5,59.9 111,58.5 "/></g>
    <g id="devices"><polygon class="st0" points="83.5,33.6 59.9,35.5 54.8,57.4 83.5,59.9 "/></g>
    <g id="interfaces"><polygon class="st0" points="59.9,35.5 31.8,33.6 27.2,59.2 54.8,57.4 "/></g>
    <g id="three"><polygon class="st0" points="132.4,11.2 164.5,3.4 164.5,32.6 135.9,36.3 "/></g>
    <g id="four"><polygon class="st0" points="164.5,32.6 136,36.3 137.1,53.9 164.5,59.2 "/></g>
    <g id="two"><polygon class="st0" points="31.8,33.6 2.5,35.3 2.5,55.9 27.2,59.2 "/></g>
    <g id="one"><polygon class="st0" points="31.8,33.6 29.5,12.8 2.5,5.7 2.5,35.3 "/></g>
</svg>

这是一个codepen：http://codepen.io/johnnybegood21/pen/wadppo

感谢您的帮助：）

编辑：我希望在每个多边形上悬停并在每个多边形上放置一些绝对位置的html。

Answer 1

您必须为SVG提供与内容尺寸相匹配的viewBox。你的SVG应该有以下viewBox：

viewBox="2.5 3.4 162 56.5"

当您这样做时，SVG会根据需要进行缩放。

Demo fiddle

添加svg图像的特定宽度和高度

1 个答案: