时间戳

首页 > 解决方案 > 不同类型的 SVG 未显示

html - 不同类型的 SVG 未显示

问题描述

我正在尝试使用 svg 在我的背景中为我正在开发的新网站制作模式。问题是我找到了一个我喜欢它并且我正在尝试自定义使用它。

我下载了看起来像这样的 SVG

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="199" viewBox="0 0 100 199"><g fill="#000"><path d="M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z"></path></g></svg>

如果我做类似的事情

.my-div {
   background-image: url("mysvg-black.svg")
}

它工作完美，但它是黑色的，我不希望它是黑色的，所以我打开我的 Photoshop 并从中更改颜色。

我将颜色更改为红色（例如）然后我导出为 SVG 并得到了这个

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="417" height="829" viewBox="0 0 417 829">
  <image width="417" height="829" xlink:href="data:img/png;base64,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"/>
</svg>

但是当我现在做的时候

.my-div {
   background-image: url("mysvg-red.svg")
}

什么都没有出现

谁能帮我解决这个问题？

我发现从photoshop导出的有很多下载的标签没有

谢谢！

标签： htmlcsssvg

解决方案

实际上，您的 SVG 代码非常基础。如果您只想更改颜色，只需更改 g 标签的填充属性值。像这样;

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="199" viewBox="0 0 100 199">
    <g fill="#f00">
        <path d="M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z"></path>
    </g>
</svg>

您可以使用 更改度量background-size。您刚刚创建的 SVG 尺寸很大。

对于更复杂的操作，您将需要可以操作 SVG 的软件。

推荐阅读