1

object タグを使用して Web ページに SVG を埋め込むと、スクリプトやアニメーションなど、ほとんどの操作オプションが提供されるという記事を読みました。ただし、obj タグを使用して埋め込むのではなく、すべての svg コードをインラインで含める場合にのみ、以下のコードを機能させることができます。うまくいけば、それは私が見逃しているものです。前もって感謝します。

<!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/、<div style="background:..."/> http://jsfiddle.net/aDMMX/7/も同様です。

だから…あなたはうまくいかない解決策を1つ選びました。;-)

他のオプションのいずれかを使用するか、アニメーションを省略するか、jQuery のバグを報告する必要があります。

于 2012-07-23T23:15:44.407 に答える