gpt4 book ai didi

css - 无法使用数据 :image/svg+xml,

转载 作者:行者123 更新时间:2023-11-28 03:54:32 25 4
gpt4 key购买 nike

我想在我的 .htm 页面中插入 .svg。但是“使用”在“svg”中不起作用。怎么做到的?

background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' width='180' height='118'
fill='white'><path d='M90,14 143,108H37z' stroke-width='11'
stroke='red'/><g id='cr'><path d='M70,68 73,59H90L93,68' stroke-width='2'
stroke='black'/><path d='M67,70H93V74H67M71,74V81M92,74V81' stroke-
width='5' stroke='black'/></g><use x='13' y='8' xlink:href='#cr'/><use
x='26' y='16' xlink:href='#cr'/></svg>")

最佳答案

这里的“use”标签没有错。

由于某种原因,URL 无法读取该 SVG。

还有一种替代方法,它是可读和可维护的。

从 URL 中取出您的 SVG 并创建一个单独的 SVG 文件...例如:test.svg

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='180' height='118' fill='white'>

<path d='M90,14 143,108H37z' stroke-width='11' stroke='red'/>

<g id='cr'>
<path d='M70,68 73,59H90L93,68' stroke-width='2' stroke='black'/>
<path d='M67,70H93V74H67M71,74V81M92,74V81' stroke-width='5' stroke='black'/>
</g>

<use x='13' y='8' xlink:href='#cr'/>
<use x='26' y='16' xlink:href='#cr'/>

</svg>

在您的 CSS 中。简单的说,URL中的SVG文件名如下测试代码:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("test1.svg") no-repeat fixed center;
}
</style>
</head>
<body>
</body>
</html>

这种做事方式可以帮助你

  1. 易于维护
  2. 可重复使用
  3. 可读性

关于css - 无法使用数据 :image/svg+xml, <svg <use>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43547876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com