作为对象嵌入脚本的SVGs

我一直在阅读使用object标签在网页中嵌入SVG提供了大多数操作选项，包括脚本和动画。但是，如果我将所有svg代码内联，而不是使用obj标签嵌入，我只能得到下面的代码才能工作。希望这是我缺少的东西。提前致谢。作为对象嵌入脚本的SVGs

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

来源

2012-07-23 user1547117

你的问题是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错误。

来源

2012-07-23 23:15:44 kay

作为对象嵌入脚本的SVGs

回答

相关问题