阅读写作属性

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 。