阅读写作属性

你可以使用 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);

…或者你可以使用自定义 cxcy,并定义 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;
  }
}