1

I have been reading that using the object tag to embed an SVG in a web page provides the most options for manipulation, including scripting and animation. But I can only get the code below to work if I include all of the svg code inline, versus embedding with the obj tag. Hopefully it is something siomple I am missing. Thanks in advance.

<!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>
4

1 回答 1

1

您的问题与 jQuery 有关：

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

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

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

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

于 2012-07-23T23:15:44.407 回答