当前位置: 首页 > 知识库问答 >
问题:

带有viewBox和preserveaspectratio=“none”的SVG元素,其rect内部仅带有容器div的宽度缩放

连俊智
2023-03-14

在codepen中,我有一个svg元素,它具有以下两个属性:

preserveAspectratio=“none”viewbox=“0 0 500 300”

共有1个答案

裴楚青
2023-03-14

为svg同时使用width和height

.holder {
  height: 400px;
  width: 90vw;
  border: 1px solid black;
}
<div class="holder">
<svg viewBox="0 54 500 246" height="400" width="100%" preserveAspectRatio="none">
   <g>
     <polyline fill="rgba(0, 0, 255, 0.3)" points="0, 245 44, 245 44, 190 47, 190 47, 245 91, 245 91, 136 98, 136 98, 245 132, 245 132, 136 136, 136 136, 190 139, 190 139, 136 142, 136 142, 245 196, 245 196, 190 199, 190 199, 245 243, 245 243, 136 250, 136 250, 245 284, 245 284, 136 287, 136 287, 190 291, 190 291, 136 294, 136 294, 245 348, 245 348, 136 351, 136 351, 190 395, 190 395, 54 398, 54 398, 81 401, 81 401, 245 436, 245 436, 136 439, 136 439, 190 443, 190 443, 136 446, 136 446, 245 500, 245 500, 136 500, 300 0, 300">     
     </polyline>
  </g>    
</svg>
</div>
 类似资料:
  • 我试图构造带有viewBox属性的内联SVG,但没有显式的width或height属性。我正在使用CSS将SVG的宽度设置为100%。这将允许SVG缩放到其包装容器中,保持由ViewBox设置的纵横比。在Chrome和Firefox中,这是完美的! 下面是我所讲内容的一个最小代码示例:http://codepen.io/pcorey/pen/amkgl HTML: CSS: viewBox是100

  • IE 9/10/11存在一个已知的问题,如果您有一个SVG文件,其中元素指定了宽度和高度,然后使用标记的属性缩放SVG图像,IE就不能正确缩放图像。 我遇到过这个问题。我有一系列SVG标志图标。对于美国标志图标,SVG对象写成: 下面是SVG的全部源代码。 我将SVG插入到带有标记的HTML文档中,并将其缩放为20x15: null 在Chrome 39上,SVG的渲染方式如下所示: 但在IE10

  • 我正在制作一个python脚本,给出Scratch.mit.edu网站上的前5个特色项目。我正在使用请求获取数据。具有这些项目标题的元素位于div标记中,但当我使用bs4时,它不显示div标记的子项或后代。我怎么看标签里面? 我已经尝试了find_all()、find()、.descendents和.children。 我需要 的输出 匿名用户 API 使用页面用来更新内容和解析json响应的ap

  • 问题内容: 我需要使用Javascript禁用DIV及其所有内容。我可以发誓,做一个简单的 曾经为我工作,但由于某种原因,它不再起作用。我不明白为什么。 在IE10中:文本“ Click Me”没有变灰,并且单击处理程序仍然有效。 我实际上需要针对IE10进行此工作。下面是我的代码。 问题答案: 尝试这个! 我看不到您在上面使用jquery,但是您将其列为标签。

  • 我想从这个网站上提取红色标记的信息。 本站的html文本由以下图片呈现。我要提取的信息再次被红色标记。 问题是我找不到带有class属性“find-元素”的div元素。我的代码看起来像这样 如果有人能帮我,那就太好了。 谢谢。

  • HTML: CSS: 问题是,当我悬停时,滚动条会像预期的那样显示出来,但当我取消悬停时,带有id的div中所有元素的宽度都会发生变化。我所说的变化是指它变得更小,以适应下一次悬停时的滚动条…我想要的是...显示滚动条时的宽度变化很好,但是当滚动条不再可见时,我希望它返回到100%的宽度,我甚至尝试将添加到div,但它不起作用。我怎么能这么做... 希望我能把自己说清楚..