编写作为对象嵌入的 SVG 脚本答案

【问题标题】：Scripting SVGs embedded as objects编写作为对象嵌入的 SVG 脚本
【发布时间】：2023-04-03 22:46:02
【问题描述】：

我一直在阅读，使用 object 标签在网页中嵌入 SVG 提供了最多的操作选项，包括脚本和动画。但是，如果我内联包含所有 svg 代码，而不是使用 obj 标签嵌入，我只能让下面的代码工作。希望这是我想念的东西。提前致谢。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SVG Demo</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
</head>
<body>
<h1>SVG Demo</h1>
<p>Animating an SVG with Javascript</p>

<button id="grow">Grow</button>
<button id="shrink">Shrink</button>

<object id="logo" type="image/svg+xml" data="images/logo.svg" alt="logo svg">No support    for SVG</object>

<script type="text/javascript">
$(document).ready(function() {
        $("#grow").click(function() {
            $("#logo").animate({ top: "50", right: "50", width: "700px", height: "102px" }, 1000, "swing");
        });
$("#shrink").click(function() {
            $("#logo").animate({ top: "50", right: "50", width: "233px", height: "34px" }, 1000, "swing");
        });
    });
</script>
</body>
</html>

【问题讨论】：

标签： javascript jquery object svg embedding

【解决方案1】：

您的问题与 jQuery 有关：

如果您使用$('#logo').css(...)，它将按预期调整大小：http://jsfiddle.net/aDMMX/3/。（animate(...) 不起作用：http://jsfiddle.net/aDMMX/2/）。

在<img> 中嵌入 SVG 也可以：http://jsfiddle.net/aDMMX/6/，<div style="background:..."/> http://jsfiddle.net/aDMMX/7/ 也是如此

所以……您选择了一个不起作用的解决方案。 ;-)

您应该使用其他选项之一，省略动画，或提交 jQuery 错误。

【讨论】：