javascript - 使用 Javascript 将 SVG 上传文件到 DOM 就绪元素

Question

我需要有人能够上传 SVG 文件，然后“检查”或“解析”该文件，以便我可以在 DOM 中使用元素及其值。我在这里、那里进行了搜索，似乎无处不在，而我似乎遇到的唯一的事情就是从 DOM 进行解析。

这可能吗？如果是的话，你能指引我正确的方向吗？

谢谢

澄清:

为了澄清，我需要有人能够上传 SVG 文件，然后我的函数将解析它并仅获取路径数据，以便我能够按照我需要的方式使用这些元素。我正在使用 angularJS 和 javascript。

Answer 1

您可以像处理任何其他 xml 一样遍历 svg 标记。如果您正在寻找javascript based solution

在文档的示例中，sMyString 的内容将是上传的 svg 的内容。

var sMyString = "<a id=\"a\"><b id=\"b\">hey!<\/b><\/a>";
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(sMyString, "image/svg+xml");
// print the name of the root element or error message
dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);

与 php, using simple xml其中 $xmlstr 是上传的 svg 的内容，来自文档:

$movies = new SimpleXMLElement($xmlstr);
echo $movies->movie[0]->plot;

这是如何使用 php 从 svg 标记检索数据的完整示例:

<?php
// $xmlstr - String - The filecontents of the uploaded svg
//
// (You can read the uploaded file and store it in a string
// with $xmlstr = file_get_contents('PATH TO THE UPLOADED SVG')
// see: http://php.net/manual/en/function.file-get-contents.php)

$xmlstr = '<svg version="1.1" id="svg-ehhh-logo" class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="610px" height="103px" viewBox="0 0 610 103" xml:space="preserve"> 
    <symbol id="ehhh_logo"> 
        <path fill="#FFFFFF" d="M0,79v24c44,0,535,0,610,0V35C436,82,199,117,0,79z"/> 
        <g> 
            <path fill="#FFFFFF" d="M146.411,10.218l59.886,0.868l-2.294,12.296l-32.013-0.463l-2.985,15.506l22.078,0.32l-2.497,13.582 l-22.078-0.32l-3.388,17.893l31.553,0.457l-2.496,13.49l-59.426-0.861L146.411,10.218z"/> <path fill="#FFFFFF" d="M211.694,11.777l22.647-0.87l-4.276,32.49c1.632-2.151,4.464-4.212,8.495-6.18 c4.03-1.967,7.849-3.02,11.459-3.159c2.508-0.097,4.779,0.369,6.809,1.396s3.474,2.306,4.329,3.839 c0.856,1.532,1.323,3.31,1.4,5.332l0.046,1.195c0.012,0.308,0.023,0.614,0.035,0.919c-0.107,0.435-0.155,0.743-0.148,0.926 l-0.54,5.084l-3.846,28.966l-22.472,0.862l3.757-28.311c-0.026-0.676,0.013-1.199,0.117-1.571l0.139-1.751 c-0.054-1.41-0.418-2.424-1.089-3.043c-0.673-0.619-1.351-1.007-2.036-1.165l-1.764-0.116c-0.678,0.026-1.414,0.162-2.207,0.407 c-0.793,0.246-1.627,1.029-2.503,2.352c-0.64,1.007-1.19,2.743-1.651,5.209l-3.677,28.409l-22.522,0.865L211.694,11.777z"/> <path fill="#FFFFFF" d="M276.282,8.705l22.583-1.916l-2.771,32.653c1.531-2.225,4.265-4.414,8.2-6.566 c3.935-2.151,7.701-3.38,11.3-3.685c2.502-0.212,4.791,0.147,6.867,1.08c2.075,0.932,3.576,2.144,4.502,3.634 c0.926,1.491,1.475,3.245,1.645,5.262l0.102,1.192c0.025,0.307,0.052,0.612,0.078,0.917c-0.088,0.439-0.121,0.749-0.105,0.933 l-0.305,5.104l-2.504,29.112l-22.407,1.9l2.445-28.455c-0.058-0.673-0.042-1.198,0.044-1.575l0.057-1.756 c-0.119-1.405-0.529-2.402-1.229-2.989c-0.7-0.587-1.396-0.943-2.087-1.069l-1.767-0.035c-0.676,0.057-1.405,0.227-2.186,0.508 c-0.781,0.283-1.578,1.104-2.392,2.465c-0.593,1.036-1.063,2.795-1.409,5.28l-2.361,28.549l-22.458,1.904L276.282,8.705z"/> <path fill="#FFFFFF" d="M339.669,2.833L362.156,0l-1.439,32.739c1.439-2.285,4.082-4.584,7.926-6.894 c3.844-2.31,7.559-3.69,11.143-4.142c2.49-0.314,4.793-0.048,6.904,0.799s3.66,1.997,4.646,3.449 c0.984,1.452,1.604,3.182,1.857,5.19l0.148,1.187c0.039,0.305,0.078,0.609,0.115,0.913c-0.068,0.442-0.09,0.753-0.066,0.936 l-0.098,5.112l-1.316,29.19l-22.312,2.811l1.285-28.531c-0.085-0.67-0.091-1.195-0.021-1.575l-0.014-1.757 c-0.176-1.399-0.627-2.378-1.35-2.937c-0.724-0.558-1.433-0.886-2.129-0.984l-1.768,0.038c-0.673,0.084-1.395,0.284-2.163,0.597 c-0.769,0.314-1.532,1.167-2.29,2.561c-0.551,1.059-0.947,2.836-1.192,5.333l-1.197,28.621l-22.362,2.816L339.669,2.833z"/> <path fill="#FFFFFF" d="M409.323,43.956c1.724-0.889,3.554-1.486,5.494-1.789c1.575-0.246,3.105-0.283,4.592-0.112 c1.484,0.172,3.041,0.689,4.665,1.552c1.405,0.65,2.563,1.711,3.477,3.182c0.337,0.569,0.666,1.278,0.984,2.127 c0.319,0.851,0.545,1.7,0.678,2.549c0.559,3.576-0.773,6.67-3.997,9.283c-3.224,2.615-6.289,4.148-9.198,4.604 c-2.122,0.331-4.237,0.195-6.349-0.406c-2.111-0.601-3.745-1.416-4.898-2.447c-1.154-1.029-1.942-2.102-2.364-3.215l-0.698-2.685 c-0.209-1.332-0.142-2.692,0.2-4.081s0.979-2.668,1.914-3.838c0.935-1.17,1.896-2.173,2.882-3.011L409.323,43.956z"/> <path fill="#FFFFFF" d="M447.214,37.789c1.704-0.925,3.521-1.562,5.454-1.905c1.569-0.28,3.1-0.349,4.589-0.21 c1.488,0.141,3.055,0.625,4.697,1.453c1.419,0.621,2.599,1.656,3.543,3.107c0.349,0.562,0.692,1.264,1.029,2.106 c0.337,0.844,0.581,1.688,0.731,2.533c0.635,3.563-0.632,6.685-3.799,9.367c-3.167,2.683-6.199,4.281-9.098,4.797 c-2.114,0.377-4.233,0.287-6.356-0.27c-2.124-0.557-3.774-1.338-4.949-2.344c-1.176-1.005-1.987-2.059-2.432-3.164l-0.756-2.669 c-0.236-1.327-0.198-2.689,0.113-4.085c0.313-1.395,0.924-2.688,1.833-3.877s1.849-2.212,2.817-3.071L447.214,37.789z"/> <path fill="#FFFFFF" d="M484.978,30.822c1.685-0.961,3.488-1.634,5.413-2.019c1.563-0.312,3.092-0.413,4.583-0.305 c1.491,0.11,3.067,0.561,4.727,1.355c1.432,0.591,2.633,1.601,3.607,3.032c0.36,0.554,0.719,1.249,1.073,2.084 c0.354,0.836,0.616,1.676,0.784,2.517c0.708,3.55-0.493,6.698-3.604,9.444c-3.11,2.748-6.108,4.409-8.996,4.985 c-2.105,0.421-4.226,0.375-6.359-0.137c-2.136-0.512-3.802-1.259-4.997-2.24c-1.197-0.98-2.03-2.018-2.498-3.113l-0.811-2.652 c-0.265-1.322-0.255-2.685,0.028-4.087c0.283-1.4,0.867-2.706,1.751-3.915c0.885-1.208,1.803-2.25,2.753-3.129L484.978,30.822z"/> 
        </g> 
    </symbol> 
</svg>';

// create a simple xml object from the string containing the xml (svg) data:
$xml = new SimpleXMLElement($xmlstr);

print '<pre>';

// in this svg, the relevant path data are in: symbol>g>path - it
// might (and probably will) differ from user uploaded files.
// With simple xml you can loop through the nodes to find
// the path data,
// see: http://php.net/manual/en/simplexml.examples-basic.php

var_dump($xml->symbol->g->path);
print '<hr>';
// the path data are stored in the 'd' attribute, retrieve it as a string:
print $xml->symbol->g->path['d'];
// voila! :-)
print '</pre>';

?>

我做了一个 fiddle 来展示如何用 javascript 来实现它: https://jsfiddle.net/tobiasbeuving/gyheqvfs/5/