html – 缩放嵌入式svg,在chrome中没有空格

概述我需要将svg嵌入到html中并以响应方式设置它.对于常规图像,这对我很有用： img { max-width: 100%;}img[height] { height: auto; /* if the <img> tag provides a width keep aspect ratio */} 不幸的是,这对嵌入式svgs不起作用.下面是一个示例,它如何在img标记中嵌入sv 我需要将svg嵌入到HTML中并以响应方式设置它.对于常规图像,这对我很有用：

@H_301_8@

@H_301_8@

img {  max-wIDth: 100%;}img[height] {   height: auto; /* if the <img> tag provIDes a wIDth keep aspect ratio */}

不幸的是,这对嵌入式svgs不起作用.下面是一个示例,它如何在img标记中嵌入svg和svg.@H_301_8@

这是一个示例标记：@H_301_8@

@H_301_8@

<div>Embedded SVG:  <svg xmlns="http://www.w3.org/2000/svg" wIDth="300px" height="300px" vIEwBox="0 0 100 100" preserveAspectRatio="xMIDYMID meet"><circle cx="50" cy="50" r="50" /></svg></div> <div>SVG as image tag:     <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDBweCIgaGVpZ2h0PSIzMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIG1lZXQiPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiAvPjwvc3ZnPg0K" /> </div>

和CSS：@H_301_8@

@H_301_8@

div {    resize: both;    outline: 1px solID red;    margin-bottom: 3em;    padding: 1em;}svg,img {  display: block;  outline: 1px solID blue;  max-wIDth: 100%;  height: auto;}

缩小两个图像保持纵横比例但嵌入的svg保持其原始高度(蓝色轮廓)@H_301_8@

如何避免嵌入式svg创建空白区域？@H_301_8@

你可以在jsfiddle找到一个例子.@H_301_8@

我想发布截图,但我没有足够的声誉：/@H_301_8@

编辑：错误仅出现在Chrome中.相应地改变了标题@H_301_8@解决方法 这在技术上不是Chrome漏洞,而是 the SVG specifications的差距.特别是：

@H_301_8@

@H_301_8@

Similarly,if there are positioning propertIEs specifIEd on the referencing element or on the outermost svg element that are sufficIEnt to establish the height of the vIEwport,then these positioning propertIEs establish the vIEwport’s height; otherwise,the ‘height’ attribute on the outermost svg element establishes the vIEwport’s height.@H_301_8@

这告诉浏览器使用< svg>的height属性作为高度,除非存在设置不同高度的冲突CSS样式,无论是否考虑图像的纵横比.现在,我们大多数人都会争辩@H_301_8@

>如果< svg>上有足够的信息建立intrinsic aspect ratio,
>那么任何明确定义宽度的CSS都应该被认为是“定位属性……足以建立视口的高度”.@H_301_8@

但规格从未明确说明.虽然firefox以这种方式解释它,但Chrome却没有.@H_301_8@

非直观的解决方案是从< svg>中删除高度和宽度属性.使用vIEwBox属性建立宽高比,并使用CSS指定最小和最大高度和宽度.@H_301_8@

@H_301_8@

<div>  Embedded SVG:  <svg xmlns="http://www.w3.org/2000/svg" vIEwBox="0 0 100 100"        preserveAspectRatio="xMIDYMID meet">     <circle cx="50" cy="50" r="50" />  </svg></div>

CSS：@H_301_8@

@H_301_8@

svg,img {  display: block;  outline: 1px solID blue;  wIDth:300px;  max-wIDth: 100%;  max-height:300px;  height: auto;}

http://jsfiddle.net/78cpD/3/@H_301_8@

注意高度：auto;样式是必需的,因为当您未将其指定为属性时,默认高度样式为100％.@H_301_8@

所有这些都比the method I’d been using previously简单,包括将SVG包装在< div>中.并使用填充定义固定的宽高比.@H_301_8@ 总结

以上是内存溢出为你收集整理的html – 缩放嵌入式svg,在chrome中没有空格全部内容，希望文章能够帮你解决html – 缩放嵌入式svg,在chrome中没有空格所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。