38

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

だから私はこの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 では問題なく動作しますが、Chrome では動作しません。回避策またはこれを解決する方法を知っている人はいますか?

ありがとう。よろしく。

4

2 に答える 2

102

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)');

長所: 設定と理解が簡単です (マークアップと同じ)。
短所：必要なものを見つけるために文字列値を解析する必要があります。アニメーション値の場合、アニメーションがアクティブなときにベース値を要求できません。汚い感じ。

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);

長所: 自分で文字列を解析する必要はありません。既存の変換リストを保持します (リスト内の単一の変換のみをクエリまたは微調整できます)。文字列ではなく、実際の値を取得します。
短所: 最初はわかりにくいかもしれません。単純な値を設定するための詳細。から回転、スケール、または傾斜の値を抽出するための便利な方法はありません。ブラウザのサポートSVGTransform.matrixがありません。

DOM を探索するために私が書いたツールが役立つかもしれません。

  1. http://objjob.phrogz.net/svg/object/131に移動します。
  2. 「継承されたプロパティ/メソッドを表示しますか?」をクリックします。チェックボックス
  3. SVGRectElementtransformにSVGAnimatedTransformList.
  4. をクリックして、オブジェクトがサポートするプロパティとメソッドをSVGAnimatedTransformList表示します。
  5. 探検！
于 2012-04-27T21:44:53.327 に答える