gpt4 book ai didi

javascript - 如何在 html5 中使用包含大量单独 svg 的 svg 文件?

转载 作者:可可西里 更新时间:2023-11-01 13:12:52 25 4
gpt4 key购买 nike

我从 http://svg-cards.sourceforge.net/ 下载了一个 svg 文件.它是一副基本的标准扑克牌。它的结构如下所示:

<defs>
<g>
<text></text>
</g>
</defs>
<g>
<g id="king_spade">
<use></use>
</g>
... //50+ more cards
</g>

自述文件说

You can access to each either by rendering the file into a pixmap and clipping each card or by using their name with a DOM interface

然后给出这个例子:

<g id="king_spade">
...
</g>

好的,很好,我明白了两者之间的关系,但我不明白如何只显示一张卡片,因为所有卡片都在同一个文件中。我所做的任何事情都渲染了整个 svg 文件(所有 55 张卡片!)

这包括:

<img>
<embed>
<object>

所以我的问题是:我究竟应该如何按照自述文件的建议轻松完成...如何在不首先显示整个文件的情况下访问组内的各个卡片?

我真正在寻找的几乎是一种像 css 一样使用它的方法。将它作为资源包含在我的脑海中,然后能够在文档正文中做 <g id="king_spade"></g>并出现一张黑桃王。不能这样用吗?

编辑: 我正在尝试在 phonegap 应用程序内部执行所有操作,因此我没有连接到外部服务器。所有资源都位于手机上,因此 ajax由于同源限制,下面的解决方案不起作用。

最佳答案

我已经将卡片文件 svg-cards.svg 下载到同一个文件夹,并尝试了如下操作:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: "svg-cards.svg",
type: "get",
dataType: "text",
success: function(svgText) {
var parser = new DOMParser();
parser.async = false;
var svgEl = $(parser.parseFromString(svgText, 'text/xml').documentElement);
svgEl.css("display", "none");
$("body").append(svgEl);
var kingSpade = $(svgEl).find("#king_spade").clone();
kingSpade.removeAttr("id");
$("#mysvg").append(kingSpade);
}
});
</script>
</head>
<body>
<svg width="500" height="500">
<g id="mysvg" transform="translate(-2000,-500)"></g>
</svg>
</body>
</html>

它在 500x500 SVG 中显示黑桃王牌。奇怪的是,他们的卡片都分布在 2178x1216 的区域,所以它们的坐标不同。您必须明确地将它们向左和向上平移以调整它们的位置。好的,我想你明白了。

关于javascript - 如何在 html5 中使用包含大量单独 svg 的 svg 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17281230/

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