自动缩放在窗口中嵌入HTML的SVG调整大小 [英] Autoscaling an SVG embedded in HTML on window resize

问题描述

我想在HTML页面中嵌入一些SVG，当页面调整大小时，它会自动调整大小（使用SVG，CSS或JS），同时仍保留原始的宽高比。

例如，使用W3Schools中的示例：

  svg xmlns =http://www.w3.org/2000/svgversion =1.1> 
< circle cx =100cy =50r =40stroke =black
 stroke-width =2fill =red/> 
< / svg> 
  

可以设置SVG宽度=窗口宽度的5％比例？

我尝试了一些包括 preserveAspectRatio =xMinYMin meet在< div> 容器中的<％>，但尚未生效。

/ p>

解决方案

您的SVG根元素需要一个 viewBox 将定义SVG图像的整体大小：

 < svg version =1.1viewBox =0 0 300 185 > 
  

现在你可以通过CSS设置图像的宽度或高度， p>

I would like to embed some SVG in an HTML page in a way such that is is automatically resized (using SVG, CSS, or JS) when the page is resized, while still preserving the original aspect ratio.

For example, using an example from W3Schools:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Is it possible to set the SVG width = 5% of the window width, and have the height scaled proportionately?

I've tried a couple things including preserveAspectRatio="xMinYMin meet" and setting the dimensions to 100% within a <div> container, but haven't gotten it working yet.

Any suggestions?

解决方案

You need a viewBox-attribute on your SVG root element, which will define the overall size of the SVG-image:

<svg version="1.1" viewBox="0 0 300 185">

Now you can set the width OR height of the image via CSS and it will scale perfectly.

这篇关于自动缩放在窗口中嵌入HTML的SVG调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！