【JavaScript】FireFoxで画像の角度変更

解決済

質問者：noname#97083
質問日時：2008/10/01 19:44
回答数：2件

ボタン押下するたびに、画像を90度→180度→270度→戻るという風に
角度変更処理をしたいと考えています。

そこで以下の様なJavaScriptで画像をPタグで囲んだエリア"AREA"をDXImageTransform.Microsoft.BasicImageで角度変更を行いました。
===============================================
document.getElementById("AREA").style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
===============================================
IEでは正常でしたが、FireFox3.0では動作しませんでした。
progid:DXImageTransform.Microsoft.BasicImageはFireFoxは動作しないのでしょうか？

そうであれば、FireFoxで動作可能な方法をお教え頂けないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Gizensha
回答日時：2008/10/01 22:58

おもいっきり　Microsoft　と入っていることから、IE向けのオブジェクトのようにお見受けします。

他ブラウザようにあるかどうかまでは探してません。
あらかじめ回転した画像を用意しておいて差し替えてみては？

参考URL：http://www5e.biglobe.ne.jp/~access_r/hp/filter/

この回答への補足

御回答、誠に有り難うございます。
参考URLのfilterですが、これまたIE独自のものらしいです。。。

補足日時：2008/10/10 09:40

通報する

- 0
- 件

通報する

No.2

回答者： himajin100000
回答日時：2008/10/02 08:30

====================Q4370469-1.xhtml========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q4370469 TestCase 1</title>
<script type="application/ecmascript">
//<![CDATA[
function init(){
var svg = document.getElementById("hoge").contentDocument.rootElement;
var img = svg.getElementsByTagNameNS("http://www.w3.org/2000/svg","g")[0];
img.setAttribute("transform","rotate(45,50,50)");
}
//]]>
</script>
</head>
<body onload="init();">
<p><object id="hoge" type="image/svg+xml" data="Q4370469-1.svg"/></p>
</body>
</html>



===========Q4370469-1.svg====================
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g xml:id="target" transform="rotate(0,0,0)">
<desc>This graphic links to an external image
</desc>
<image x="0" y="0" width="100px" height="100px" xlink:href="Q4370469-1.png" >
<title>My image</title>
</image>
</g>
</svg>