web-dev-qa-db-ja.com

クロムのJavaScriptを使用してSVG要素の変換変換を操作する方法は？

JavaScriptを使用してSVG要素のtransform="translate(x,y)"属性を操作したい。

だから私はこのHTMLコードを得ました：

_<body>

<svg id="test" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100% 100%" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <rect transform="translate(100,100)" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    <rect transform="translate(400,400)" width="300" height="400" style="fill:red; stroke-width:1; stroke: yellow" />
</svg>

</body>
_

そして、このJavaScriptコード：

_var positioner = (function(domUtils){

   var svg = document.getElementById("test");
   var elementOffset = 100;

   function getAbsoluteX(leftElement) {
    return domUtils.getWidth(leftElement) + elementOffset; 
   }

   function getAbsoluteY(topElement) {
    return domUtils.getHeight(topElement) + elementOffset;
   }   

   var rectangles = document.querySelectorAll("rect");
   for(var i = 0; i < rectangles.length; ++i) {
    var spaceLeft = 0;
    if(i > 0) {
      spaceLeft = getAbsoluteX(rectangles[i-1]);
    }
    var rect = rectangles[i];
    var attrValue = "translate(" + spaceLeft + ", 100)";
    rect.setAttribute('transform', attrValue);
   };
 })(domUtils);
_

ここで、getAbsoluteX()は自己定義関数です。

FirefoxではNiceで動作しますが、Chromeでは動作しません。回避策またはこれを解決する方法を知っている人はいますか？

ありがとう。よろしく。

javascriptgoogle-chromesvgtransform
31
user1360990

Chrome、Firefox、IE、または標準を恐れるSVGユーザーエージェントのSVG要素の変換値を取得/設定するには、2つの方法があります。

属性を介した変換の処理

// Getting
var xforms = myElement.getAttribute('transform');
var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
    firstY = parts[2];

// Setting
myElement.setAttribute('transform','translate(30,100)');

Pros：設定と理解が簡単（マークアップと同じ）/
Cons：文字列値を解析して必要なものを見つける必要があります。アニメーション化された値の場合、アニメーションがアクティブなときにベース値を要求することはできません。汚れている。

SVG DOMバインディングを介した変換の処理

// Getting
var xforms = myElement.transform.baseVal; // An SVGTransformList
var firstXForm = xforms.getItem(0);       // An SVGTransform
if (firstXForm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
  var firstX = firstXForm.matrix.e,
      firstY = firstXForm.matrix.f;
}

// Setting
myElement.transform.baseVal.getItem(0).setTranslate(30,100);

Pros：独自に文字列を解析する必要はありません。既存の変換リストを保持します（リスト内の1つの変換のみを照会または調整できます）。文字列ではなく実際の値を取得します。
Cons：最初は理解しにくいかもしれません。単純な値を設定するためのより冗長な; SVGTransform.matrixから回転、スケール、またはスキューの値を抽出する便利な方法がありません。 ブラウザサポートがありません .

これで役立つDOMを調査するために書いたツールを見つけることができます。

  1. http://objjob.phrogz.net/svg/object/131 に移動します
  2. 「継承されたプロパティ/メソッドを表示しますか？」をクリックしますチェックボックス
  3. SVGRectElementには、transformであるSVGAnimatedTransformListプロパティがあります。
  4. SVGAnimatedTransformListをクリックして、オブジェクトがサポートするプロパティとメソッドを表示 します 。
  5. 見る！
87
Phrogz