如何使 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% 高度:自动(一旦我删除了以像素为单位的宽度/高度设置，图表就会消失，无论我放回什么) - 使用 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.

(是的，我知道之前可能有人问过这个问题，但没有一个答案能解决我的问题)

(and yes I know this question may have been asked before, but none of the answers solved my problem)

推荐答案

与评论中的假设相反，使用指定为百分比的长度值完全没问题.该规范在其基本数据类型部分涵盖了详细信息.

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屋！