Параметр передачи Svg

#html #svg

#HTML #svg

Вопрос:

Я пытаюсь передать параметры в svg, но я не делаю что-то не так, вы можете мне помочь?

HTML:

 <object type="image/svg xml" data="button.svg?color=yellow">
      <param name="color" value="red" />
      <param name="label" value="stop" />
</object>

Svg:

 <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
    <g>
        <rect 
id="button_rect" 
x="5" 
y="5" 
width="100" 
height="30" 
rx="15" 
ry="15" 
fill="param(color) blue" 
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle" 
            font-size="25" fill="white" font-family="Verdana"
            content-value="param(label)">
            Ok
          </text>
    </g>
</svg>

1. вам необходимо включить param.js за w3.org/TR/SVGParamPrimer /. …

2. Я попытался включить его, вы можете увидеть его в codesanbox, но он не работает.

3. Я пытаюсь всеми способами, но у меня ничего не получается.

Ответ №1:

Люди, которые написали спецификации, отметили, что, хотя это не реализовано в самом браузере, вам необходимо включить библиотеку Javascript. То, что они упустили, — это то, куда вы должны его включить. Очевидно, что вашей первой мыслью может быть включение его в HTML-документ, но это не так — он должен быть включен в svg-файл как:

 <script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>

Кроме того, я бы рекомендовал ссылаться на параметры, используя url(#parameterName) синтаксис.

Например:

 <html>
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <object type="image/svg xml" data="button.svg?fill=red">
      <param name="fill" value="blue" />
      <param name="stroke" value="red" />
    </object>
  </body>
</html>

и button.svg:

 <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<defs>
    <ref id="paramX" param="fill" default="red"/>
    <ref id="paramY" param="stroke" default="blue"/>

</defs>
    <g>
        <rect 
id="button_rect" 
x="5" 
y="5" 
width="100" 
height="30" 
rx="15" 
ry="15" 
fill="url(#paramX)" 
stroke="url(#paramY)"
/>
<text 
id="button_label" 
x="55"
y="30"
text-anchor="middle" 
font-size="25"
fill="white"
font-family="Verdana" >
Go
</text>
    </g>
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
</svg>