閱讀寫作屬性

Created: November-22, 2018

你可以使用 DOM Level 2 Core 方法 getAttribute()，getAttributeNS()，setAttribute() 和 setAttributeNS() 來讀取和寫入 SVG 元素的值，也可以使用 SVG 1.1 IDL （介面定義語言）中指定的自定義屬性和方法。

簡單的數字屬性

例如，如果你有一個 SVG 圈元素：

<circle id="circ" cx="10" cy="20" r="15" />

你可以使用 DOM 方法來讀取和寫入屬性：

var circ = document.querySelector('#circ');
var x = circ.getAttribute('cx') * 1; // Use *1 to convert from string to number value
circ.setAttribute('cy', 25);

…或者你可以使用自定義 cx，cy，並定義 r 性質 SVGCircleElement 。請注意，這些不是直接數字，而是與 SVG 1.1 中的許多訪問器一樣 - 它們允許訪問動畫值。這些屬性型別為 SVGAnimatedLength 。忽略動畫和長度單位，你可以使用以下屬性：

var x = circ.cx.baseVal.value; // this is a number, not a string
circ.cy.baseVal.value = 25;

轉換

SVG 組可用於移動，旋轉，縮放和以其他方式轉換多個圖形元素作為整體。（有關 SVG 翻譯的詳細資訊，請參閱第 7 章）。這是一個製作笑臉的組，你可以通過調整 transform 來調整大小，旋轉和位置：

<g id="smiley" transform="translate(120,120) scale(5) rotate(30)">
  <circle r="20" fill="yellow" stroke-width="2"/>
  <path fill="none" d="M-10,5 a 5 3 0 0 0 20,0" stroke-width="2"/>
  <circle cx="-6" cy="-5" r="2" fill="#000"/>
  <circle cx="6"  cy="-5" r="2" fill="#000"/>
</g>

使用指令碼通過 DOM 方法調整此比例需要將整個 transform 屬性作為字串進行操作：

var face = document.querySelector('#smiley');

// Find the full string value of the attribute
var xform = face.getAttribute('transform');

// Use a Regular Expression to replace the existing scale with 'scale(3)'
xform = xform.replace( /scale\s*\([^)]+\)/, 'scale(3)' );

// Set the attribute to the new string.
face.setAttribute('transform',xform);

使用 SVG DOM，可以遍歷列表中的特定變換，找到所需的變換，並修改值：

var face = document.querySelector('#smiley');

// Get the SVGTransformList, ignoring animation
var xforms = face.transform.baseVal;          

// Find the scale transform (pretending we don't know its index)
for (var i=0; i<xforms.numberOfItems; ++i){
  // Get this part as an SVGTransform
  var xform = xforms.getItem(i);
  if (xform.type == SVGTransform.SVG_TRANSFORM_SCALE){
    // Set the scale; both X and Y scales are required
    xform.setScale(3,3);
    break;
  }
}

有關遍歷和操作變換數的資訊，請參閱 SVGTransformList 。
有關操作單個變換的資訊，請參閱 SVGTransform 。