Question

我一直在阅读使用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>

Answer 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错误。

脚本作为对象嵌入的SVG

1 个答案: