如何使svg响应 [英] how to make svg responsive

问题描述

我想让这个巨大的svg响应。但是，它不工作，我不知道为什么。

I'm trying to make this massive svg responsive. However, it's not working and I don't know why.

我尝试以下： - 设置宽度：100％height：auto（图表消失删除设置的宽度/高度（以像素为单位，不管我放回什么位置） - 使用 https ：//css-tricks.com/scale-svg/

I tried the following: - setting width: 100% height: auto (the diagram disappeared as soon as I removed the set width/height in pixel, regardless what i put back) - using the viewbox attribute as suggested by https://css-tricks.com/scale-svg/

这里是代码（是的，我知道它是巨大的，为什么我需要使它适合到100％宽度）： http://www.cssdesk.com/bsakG

Here's the code (yes, I know it's huge. why I need to make it fit to 100% width): http://www.cssdesk.com/bsakG

有人可以给我一些提示，我做错了什么？我尝试了其他文章建议的许多事情，但我似乎仍然遇到相同的问题，如果我摆脱固定的高度/宽度，整个事情消失了。

Can someone give me some hint as to what I'm doing wrong? I tried many things suggested by other articles, but I seem to keep running into the same problem where if I get rid of the fixed height/width, the whole thing disappeared.

推荐答案

与之相反在注释中的假设，使用指定为百分比的长度值是完全正确的。此规范涵盖其基本数据类型部分中的详细信息。

Contrary to the assumptions in the comments it is perfectly fine to use length values specified as percentages. The spec covers the details in its basic data types section.

将此知识与您在问题中链接的文章的提示结合起来，您可能会得到类似以下内容的响应式布局：

Combining this knowledge with the hints from the article you linked to in your question you could end up with something like the following for a responsive layout:

<svg viewbox="0 0 3840 7000" width="100%" height="100%" preserveAspectRatio="xMinYMin meet">

这篇关于如何使svg响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！