【问题标题】:Getting the dimensions of an svg path without using bounding box在不使用边界框的情况下获取 svg 路径的尺寸
【发布时间】:2013-02-03 15:33:49
【问题描述】:

有没有办法获取 svg 路径的尺寸并将其显示在 div 中?边界框不是一个选项,因为当涉及到贝塞尔曲线时,它在 Webkit 中是错误的。我正在修改 svg-edit 顺便说一句:https://code.google.com/p/svg-edit/

这是我目前使用的。

    <script>
    var myVar=setInterval(function(){getDimensions()},10);

    function getDimensions() 

    {

  svgNode = svgCanvas.getSelectedElems()[0];


var getw = svgNode.getBoundingClientRect().width;
var geth = svgNode.getBoundingClientRect().height;
getw= parseInt(getw);
geth= parseInt(geth);
 document.getElementById('heightbox').innerHTML = geth;
 document.getElementById('widthbox').innerHTML = getw;



}

    </script>

不幸的是,边界框不可靠。除了 bbox 之外还有什么想法吗?

【问题讨论】:

    标签: javascript html svg jquery-svg librsvg


    【解决方案1】:

    RaphaelJS 有一个确定路径边界框的实用方法 - http://raphaeljs.com/reference.html#Raphael.pathBBox

    var dims = Raphael.pathBBox(pathString);
    var getw = dims.width;
    var geth = dims.height;
    

    【讨论】:

    • 它与我使用的不同吗?关于如何使用您的解决方案修改代码的任何想法?
    • 它不使用 SVG 边界框 API,而是使用指定路径的边界尺寸的代数计算。它是一种采用 SVG 样式路径字符串的静态方法。你应该可以在你的项目中包含这个库并直接使用该方法。
    • 试试 var dims = Raphael.pathBBox(svgNode.getAttribute('d'));此处的工作示例jsfiddle.net/ReEmu/2 表示路径的字符串存储在“d”属性中。
    • raphael.js 是开源的吗?
    猜你喜欢
    • 1970-01-01
    • 2013-04-28
    • 2011-10-25
    • 1970-01-01
    • 1970-01-01
    • 2016-09-29
    • 1970-01-01
    • 1970-01-01
    • 2017-08-20
    相关资源
    最近更新 更多