Сбои в параметризации изображений SVG

Question

Я пытаюсь создать список простых изображений и хотел бы использовать векторы.

Я создал простой svg и прочитал праймер w3c по параметрам . Насколько я вижу, это черновик. Прямо сейчас Мой проект основан на PHP, но может не быть в будущем. Поэтому переход на БД невозможен.

Я пытался

<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>

EDIT # 1

Я наблюдал за сценарием , который должен был быть включен . В svg.

Ссылка на <script src="refs.js" type="text/javascript"></script> в качестве последнего элемента в моем <svg> не работает. Я закончил тем, что включил его , как показано в других местах. Int SO

Результат: теперь граница больше невидима, а отображаются только цвета по умолчанию.

РЕДАКТИРОВАТЬ # 2

Я отметил, что я использовал refs.js , а не 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"/>, который прекрасно работает, но все еще только с цветами по умолчанию.

EDIT # 3

Я попробовал другой параметр, и теперь он, кажется, работает (в Chrome, FF, Край)

Answer 1

Мои эксперименты показали, что это все равно возможно. новейшая версия библиотеки параметров является наиболее стабильной.

Попытка получить доступ к ссылкам после того, как библиотека скриптов установила значения, вызвала новые проблемы. Я скопировал часть скрипта, чтобы получить доступ к значениям и действовать на них:

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);

        }
    }

}