首页 文章

我想将svg图像的大小调整为屏幕宽度的100％ . 然后高度应溢出，保持原始高度/宽度比

提问于
浏览 次
0

我在网站上放置了一个svg世界 Map （我在代码中只留下了一条路径（国家/地区））：

.mapcontainer {height: 120%; width: 100%;}

<div class="mapcontainer">
  <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620">
    <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
  </svg>
</div>

根据我的研究，上面的viewBox属性的语法应该使SVG比例填充屏幕或容器，但它达到100％的屏幕高度，并在宽度的两侧留下空间 . 但我希望这个特定的 Map 可以扩展到100％的屏幕宽度和高度溢出 .

我试过了：

  • 在svg元素内设置宽度

  • 忽略高度！在svg文件和css中

  • preserveaspectratio与视图框的几种用法，包括没有这是宽度达到100％的唯一时间，尽管这是扭曲的高度 .

非常感谢您的帮助！

html css svg

3 回答

  • 0

    您可能想要的是在svg上将 preserveAspectRatio 指定为 slice ，并且仅在css中指定 width .

    通过在svg上设置一个宽度（而不是高度），浏览器将自动保持纵横比 .

    您可能还想在CSS中设置 min-height 为100％ .

    （我添加了一个红色边框，看看发生了什么）

    .mapcontainer {width: 100%;}

    <div class="mapcontainer">
  <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 620"
  preserveAspectRatio="xMidYMin slice">
    <rect fill="red" x="0" y="0" width="950" height="620" />
    <rect fill="white" x="10" y="10" width="930" height="600" />
    <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
  </svg>
</div>
    回复于
  • 0

    CSS中有一个新的度量单位，称为vw或视口宽度 - 您可以通过将其样式设置为高度来修复宽高比：120vw，只要它填充100％的视口宽度即可 .

    回复于
  • 0

    我在svg中添加了一个rect来查看它是如何填充div的 . 然后我使用innerWidth / innerHeight来设置svg的宽度和高度：

    document.addEventListener("onload", init(), false)

 function init() {
   var svgW = window.innerWidth
   var svgH = window.innerHeight
   svg2.setAttribute("width", svgW)
   svg2.setAttribute("height", svgH)
 }

    <body style='font-family:arial;overflow:hidden;'>
  <div style="position:absolute;top:0px;left:0px;background-color:lightgreen">
    <svg version="1.2" baseProfile="tiny" id="svg2" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <rect x="0" y="0" fill="lightblue" width="100%" height="100%" />
      <path fill="black" id="kalimantan" d="M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4z" />
    </svg>
  </div>
</body>
    回复于

相关问题