时间戳

首页 > 解决方案 > SVG 文件的外观因环境而异

html - SVG 文件的外观因环境而异

问题描述

我正在努力解决这样的问题：当我直接在浏览器中打开 .svg 文件时，它会正确显示。当我将代码粘贴到我的 index.html 文件时，我只能渲染图像的一半，即一个<path>或一个<g>标签。当我background-image在 CSS 中使用 url() 函数加载此文件时，也会发生同样的情况。是什么导致了这种情况？这是 .svg 代码：

<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1440 320">
    <g transform = "translate(0, 310)">
        <path transform = "scale(1, -1) translate(0, -100)" fill = "#0099FF" fill-opacity = "1" d = "M0,224L28,224C48,224,96,224,144,186.7C192,149,240,75,288,69.3C336,64,384,128,432,154.7C480,181,528,171,576,154.7C624,139,672,117,720,106.7C768,96,816,96,864,117.3C912,139,960,181,1008,181.3C1056,181,1104,139,1152,117.3C1200,96,1248,96,1296,106.7C1344,117,1392,139,1416,149.3L1440,160L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
    </g>
    <g transform = "translate(0, -225)">
        <path fill = "#0099FF" fill-opacity = "1" d = "M0,224L24,224C48,224,96,224,144,186.7C192,149,240,75,288,69.3C336,64,384,128,432,154.7C480,181,528,171,576,154.7C624,139,672,117,720,106.7C768,96,816,96,864,117.3C912,139,960,181,1008,181.3C1056,181,1104,139,1152,117.3C1200,96,1248,96,1296,106.7C1344,117,1392,139,1416,149.3L1440,160L1440,320L1416,320C1392,320,1344,320,1296,320C1248,320,1200,320,1152,320C1104,320,1056,320,1008,320C960,320,912,320,864,320C816,320,768,320,720,320C672,320,624,320,576,320C528,320,480,320,432,320C384,320,336,320,288,320C240,320,192,320,144,320C96,320,48,320,24,320L0,320Z"></path>
    </g>
</svg>

关于我想用这张图片实现的附加信息：.svg 文件应该显示两个波浪。其中一个垂直翻转，它们都应该粘在一起。我想用它作为背景。

标签： htmlcsssvg

解决方案

推荐阅读