在浏览器中使用内嵌SVG而不使用javascript？

我一直在回顾哪些是非常好的，但可能已经过时了，我想知道在保持纵横比的同时，在一种使内嵌svg响应的简单方法上是否取得了任何进展

---

换句话说，如果我们在一个div容器中有一个纵横比为1:1的svg，并且容器从400x400px收缩到200x200px，那么视图框的宽度和高度参数将加倍。

如果您不需要用css更改svg或修改它，我建议您将其用作

img

元素。创建一个

img

，并将svg的路径放在

src

中。我的意思是：

我最近遇到了一个类似的问题，我有一个容器，它需要

保存aspectratio=“none”

以在不同的窗口大小上保持形状流畅，但里面的图像会失真。我还没有看到任何解决这个问题的方法，不管有没有JS，所以我认为这是不可能的。

我不知道你想要什么。在你的问题中，当你谈到“视图框宽度和高度参数加倍”时，我不知道你是什么意思。也许您对

viewBox

的工作原理感到困惑

只要SVG有一个

视图框

，它就应该是响应的

在下面的示例中，我将SVG放在

div

容器中，并设置容器大小的动画以模拟页面大小的变化

#容器{
宽度：200px；
背景：亚麻布；
动画：缩放1s交替无限；
}
@关键帧比例{
从{宽度：200px；}
至{宽度：100px；}
}

确定要使用不带Javascript的ViewBox？不带Javascript吗？演示会很棒…在使用文本编辑器更改标记之前：之后：当其他人在不同大小的设备上查看页面时会发生什么？他们是否还需要进入并手动更改viewbox参数？最终的目标是svg在小屏幕设备上自动缩小，在大屏幕上自动扩展……这就是我想要的效果，除了更具响应性。换句话说，如果div图像

容器
收缩，那么内联svg也会自动收缩。我希望浏览器现在已经解决了这个问题……如果问题是“解决”，谢谢您将其标记为“已解决：”）您可能想看看这个角圆进度组件。我正在研究它的响应部分是如何工作的。IIUC如果您设置
preserveSpectratio=none
，则宽高比将不会被保留，因此您的图像将被扭曲。您好@Ole，是的，我知道整个宽高比是如何工作的，我试图找到一种保持图像宽高比的剪辑形状的方法，我可以在形状上放置overflow:hidden属性，但这是不可能的。这里有一个非常好的教程：例如，当圆上的视口设置为100x100px时，整个圆都会显示，但是如果视口（）设置为50x50px，则只会显示圆的四分之一，剩下的都剪掉了…也许你知道。。。但至少它剪辑了图像。。。可能必须用javascript来控制这些属性…好吧！谢谢，真是大开眼界。在回顾了一个角度分量和其他一些文档之后，我说服自己，这比应该的要困难得多……但现在我不相信了。再次感谢。