Html 动态缩放SVG_Html_Css_Svg - Fatal编程技术网

Html 动态缩放SVG

html css svg

Html 动态缩放SVG,html,css,svg,Html,Css,Svg,我不确定如何使用SVG背景，它的缩放取决于屏幕大小（全宽）和-标记中的内容量。我希望能够在高度上缩放到SVG，但在这种情况下不能在宽度上缩放我一直在努力使这项工作已经有相当一段时间了，但我不知道如何做到这一点。有人能帮我吗 html <html> <head> </head> <body> <ul> <li>test 1</li> <li>test 2</li> <l

我不确定如何使用SVG背景，它的缩放取决于屏幕大小（全宽）和

-标记中的内容量。我希望能够在高度上缩放到SVG，但在这种情况下不能在宽度上缩放

我一直在努力使这项工作已经有相当一段时间了，但我不知道如何做到这一点。有人能帮我吗

html

<html>
<head>

</head>
<body>
<ul>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
</ul>
</body>
</html>

使用transform:scale（x，y）css属性更改SVG的比例

例如：

li:n个孩子（奇数）{
背景：url(http://leanimpactaward.ch/img/GRAFIK_Accordeon_V1.svg);
背景大小：100%；
背景重复：无重复；
变换：比例（1,0.5）；
}

您正在尝试拉伸svg图像，这是不可能的

编辑svg文件并将

preserveSpectratio=“none”

添加到svg属性中可能会起到作用。您可能还需要删除宽度和高度。

您需要在此处、您的问题中以及任何第三方网站上发布一个。您好@Rob，我认为它在JSFIDLE上可读性更好。我现在在描述中添加了代码片段。首先将

background

更改为

background image

这可能已经做到了。您的SVG应该被视为图像。。。在网上搜索“svg背景图像”有很多例子显示了它是如何工作的（例如css技巧，或codepen）这也会改变文本大小我知道为什么这被否决了吗？我说的还不够详细吗？如果您需要更详细的解释，CSS技巧有一篇很好的文章：

ul li {
 height: 6em;
}

li:nth-child(odd) {
    background: url(http://leanimpactaward.ch/img/GRAFIK_Accordeon_V1.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}

li:nth-child(even) {
    background: url(http://leanimpactaward.ch/img/GRAFIK_Accordeon_V2.svg);
    background-size: 100%;
    background-repeat: no-repeat;
}