参数化 SVG 图像失败

Question

我正在尝试创建一个简单图像列表并希望使用矢量。

我创建了一个简单的 svg 并阅读了w3c primer on parameters。据我所知，这是一个草稿。现在我的项目是基于 PHP 的，但将来可能不会。因此搬到GD是不可行的。

我试过了

<object type="image/svg+xml" data="belt.svg">
   <param name="border" value="green" />
   <param name="color" value="white" />
</object>

与

<object type="image/svg+xml" data="belt.svg?color=red"></object>

没有成功。我尝试参数化的任何对象都变得不可见。如果我在 Inkscape 中打开它，图像的一部分是不可见的。

我的次要选择是将 svg 视为模板，并使用服务器端脚本填充颜色，但我想避免这种情况。

SVG：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10mm"
   height="18.531443mm"
   viewBox="0 0 10 18.531443"
   version="1.1"
   id="svg8"
   sodipodi:docname="belt.svg"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
  <defs
     id="defs2" >
       <ref id="paramBorder" param="border" default="black"/>
       <ref id="paramFill" param="color" default="green"/>
       <ref id="paramSnips" param="snips" default="white"/>
     </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="4"
     inkscape:cx="-105.07289"
     inkscape:cy="88.745915"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:window-width="1920"
     inkscape:window-height="1012"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1">
    <inkscape:grid
       type="xygrid"
       id="grid3713"
       originx="0"
       originy="-280" />
  </sodipodi:namedview>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,1.531443)">
    <path
       style="stroke:none;stroke-width:0.26386964px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       fill="url(#paramBorder)"
       d="M 10,17 H 0 V -1.25625 h 10 z"
       id="beltBackground"
       inkscape:connector-curvature="0" />
    <path
       style="fill-opacity:1;stroke:none;stroke-width:0.25726196px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       fill="url(#paramBorder)"
       d="M 0,-1.531443 H 10 V 17 H 9.7500003 V -1.2667081 H 0.24999999 V 17 H 0 Z"
       id="beltBorder"
       inkscape:connector-curvature="0" />
  </g>
   <script xmlns="http://www.w3.org/2000/svg" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ref.js"/>

</svg>

编辑#1

我监督了script that had to be included。在 svg 中。

使用<script src="refs.js" type="text/javascript"></script> 作为我的<svg> 中的最后一个元素引用它不起作用。我最终不得不包含它as demonstrated other places int SO

结果：现在边框不再不可见，而只显示默认颜色。

编辑#2

我注意到我使用了 refs.js 而不是 cmets 中建议的 params.js。这导致一切都崩溃了。我在 Primer 网站的来源达到顶峰，并意识到我原来的包含链接不正确。现在是<script xmlns="http://www.w3.org/2000/svg" type="text/ecmascript" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="ref.js"/>，效果很好，但仍然只有默认颜色。

编辑#3

我尝试了一个不同的参数，现在它似乎可以工作（在 Chrome、FF、Edge 中）

Answer 1

我的实验告诉我，无论如何这是可能的。 newest version of the parameter library 最稳定。

在脚本库设置值后尝试访问 refs 会产生新问题。所以我复制了脚本的一部分来访问这些值并对其采取行动：

getNumSnips();
function getNumSnips() {
    var href = document.defaultView.location.href;
    if (-1 != href.indexOf("?")) {
        var paramList = href.split("?")[1].split(/&|;/);
        for (var p = 0, pLen = paramList.length; pLen > p; p++) {
            var eachParam = paramList[p];
            var valList = eachParam.split("=");
            var name = unescape(valList[0]);
            var value = unescape(valList[1]);
            console.log(name + ":" + value);

        }
    }

}