Html 使css背景图像(svg)具有响应性
我想使用SVG文件作为背景图像(css) 以下是我的SVG:Html 使css背景图像(svg)具有响应性,html,css,svg,Html,Css,Svg,我想使用SVG文件作为背景图像(css) 以下是我的SVG: <?xml version="1.0"?> <svg width="428" height="100" xmlns="http://www.w3.org/2000/svg"> <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> <g> <title>backgroun
<?xml version="1.0"?>
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/>
</g>
</g>
<g>
<title>Layer 1</title>
<text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text>
</g>
</svg>
现在我的问题是SVG没有响应。我怎样才能解决这个问题
任何帮助都将不胜感激
编辑:
我已经尝试将
svg
宽度和高度设置为100%,但没有成功。给
元素一个viewBox属性,例如viewBox=“0 0 0 428 100”
尽管chipChocolate.py建议viewBox=“0 0 580 400”
可能工作得更好,具体取决于您希望看到的内容。您的svg
代码缺少id为#gridpattern
的元素。请发布完整的代码。嘿,谢谢你的帮助,但实际上,这是完整的代码。我使用了这个编辑器:。然后您应该删除url(#gridpattern)
,因为您的代码中没有定义模式,并用一些颜色替换它。我认为这是因为rect
的背景是透明的。这就是您使其响应的方式:-->。它不应该是viewBox=“0 0 580 400”吗
?因为他正在使用width=“580”
和height=“400”
作为rect
。
#new-hello-world {
background-image: url(…);
background-repeat: no-repeat;
}