Chủ đề thú vị vì AFAIK hiện tại Firefox không hỗ trợ hoạt ảnh trong SVG.
Vì vậy, tôi đã thực hiện một cuộc điều tra nhỏ và tìm ra giải pháp làm việc. Thử nghiệm trong Firefox 3.6, IE7 với trình cắm Adobe, Opera 10.51, Safari 4.0.5, Chrome 5.0.
Nền của vùng SVG không có độ trong suốt trong IE7, Safari và Chrome ... Tôi có thể thử với đối tượng (không được IE hỗ trợ, có thể cần một số HTML có điều kiện ...).
[EDIT] OK, tôi đã thay đổi để sử dụng các tiêu chuẩn hơn đối tượng (nhúng chưa bao giờ được định nghĩa trong HTML ...) ngoại trừ IE, nơi nó được không cũng được hỗ trợ bởi Adobe SVG plugin. Sau này cho phép thêm thuộc tính để có độ trong suốt của đối tượng nhúng. Đối với trình duyệt dựa trên Webkit, không có độ trong suốt: xem object embedded in HTML: default background should be transparent lỗi.
Mã HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Animating SVG</title>
</head>
<body bgcolor="#CCAAFF" onload="RotateSVG()">
<!--[if !IE]> -->
<object id="gear" data="gear.svg" type="image/svg+xml"
width="500" height="500"
style="position: absolute; top: -250px; left: -250px;">
<!--<![endif]-->
<embed id="gear" src="gear.svg" type="image/svg+xml"
width="500" height="500" wmode="transparent"
style="position: absolute; top: -250px; left: -250px;"/>
<!--[if !IE]> -->
</object>
<!--<![endif]-->
<div onclick="RotateSVG()"
style="position: absolute; top: 250px; background-color: #ACF;">Start/Stop</p>
<script type="text/javascript">
var animator;
var angle = 0;
function RotateSVG()
{
if (animator != null)
{
// Just stop
clearInterval(animator);
animator = null;
return;
}
var svgTag = document.getElementById("gear");
var svgDoc = null;
try
{
// Most modern browsers understand this
svgDoc = svgTag.getSVGDocument();
}
catch (ex) {} // Ignore error
if (svgDoc == undefined)
{
svgDoc = svgTag.contentDocument; // For old Mozilla?
if (svgDoc == undefined)
{
alert("Cannot get SVG document");
return;
}
}
var gear = svgDoc.getElementById("gearG");
if (gear == null)
{
alert("Cannot find gearG group");
return;
}
animator = setInterval(
function()
{
angle += 5;
gear.setAttribute("transform", "rotate(" + angle + " 250 250)");
}, 100);
}
</script>
</body>
</html>
Mã SVG tôi đã sử dụng (chỉ có ID là quan trọng, SVG là từ Mozilla SVG Project):
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
baseProfile="full">
<!-- http://www.mozilla.org/projects/svg/ -->
<g id="gearG" fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
<circle cx="6cm" cy="2cm" r="100" fill="red"
transform="translate(0,50)" />
<circle cx="6cm" cy="2cm" r="100" fill="blue"
transform="translate(70,150)" />
<circle cx="6cm" cy="2cm" r="100" fill="green"
transform="translate(-70,150)" />
</g>
</svg>
tốt, hoàn thành câu trả lời, bạn đã nhanh hơn tôi ! :-) FF3 có hỗ trợ hoạt ảnh Smil ngay bây giờ không? Tôi chưa thử. – PhiLho
Firefox 3.7 alpha Tôi đã hỗ trợ ít nhất một phần của nó: http://blog.dholbert.org/2009/10/smil-enabled-by-default-on-nightly.html. Hãy tự mình thử nghiệm nó dựa trên testuite của sv3 w3c, http://dev.w3.org/SVG/profiles/1.1F2/test/harness/ –