snap svg 获取 viewBox答案

【问题标题】：snap svg get viewBoxsnap svg 获取 viewBox
【发布时间】：2016-03-08 10:04:25
【问题描述】：

我有一个简单的 SVG 文件，其中包含一个像这样的矩形：

<svg id="mySvg" onload="init()" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" viewBox="0 0 744.09448819 1052.3622047" width="210mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata id="metadata892">
  <rdf:RDF>
  <cc:Work rdf:about="">
  <dc:format>image/svg+xml</dc:format>
  <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
  <dc:title/>
  </cc:Work>
  </rdf:RDF>
</metadata>
<script xlink:href="snap.svg-min.js" type="text/ecmascript"/>
<rect id="myRect" opacity="1"  rx="28.143" ry="37.785" height="225.71" width="365.21" y="260.93" x="94.286"/>
</svg>

...然后，在结束 </svg> 标记之前，我放了这个脚本：

<script><![CDATA[
var mySvg, myRect;

function init(){
  mySvg=Snap("#mySvg");
  myRect=mySvg.select("#myRect");
  myRect.click(rectCursor);
}

function rectCursor(evt){
  if(evt.type==="click"){
  alert(mySvg.attr("viewBox"));
}

]]></script>

我只是想让警报框在我单击矩形时显示当前视图框，悬停，当我单击矩形时，警报框只显示 [object Object]

关于我应该如何实现这一点的任何建议？我应该如何正确地将 [object Object] 转换为可读字符串？

【问题讨论】：

标签： javascript svg snap.svg

【解决方案1】：

attr() 函数返回一个对象，该对象具有描述视图框的属性。该对象具有数字值的 x,y,width,height 属性。该对象具有 vb 属性，它是一个包含 x,y,width,height 值的字符串值。

使用 x,y,width,height 属性的代码可能看起来像...

var viewBox = mySvg.attr("viewBox");
alert(viewBox.x + " " + viewBox.y + " " + viewBox.width + " " + viewBox.height);

使用 vb 属性的代码可能看起来像...

alert(mySvg.attr("viewBox").vb);

【讨论】：