Question

我是HTML和SVG编码的新手并且有一个问题

我创建了一个HTML模板，使用URL搜索导入2个变量（.i.e.AItext和AItextcolour）我想使用它们并将它们传递给SVG代码。我已设法使用AItext来改变文本显示，但AItextcolour似乎并没有改变文本的颜色。

以下是我正在使用的HTML代码

<script language="JavaScript">
  function get_AI_variables()
  {
   var parameters = location.search.substring(1).split("&");
   document.getElementById("AItext").innerHTML = parameters[0];
   document.getElementById("AItextcolour").innerHTML = parameters[1];
  }
</script>
<body onload="get_AI_variables()">
  <h2>Received: </h2>
  <p><b>Text: </b> <text id="AItext"/></p>
  <p><b>Fill colour: </b><text id="AItextcolour"/></p>
  <svg>
    <defs>
      <filter id="shadow_filter" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
      <path id="path1" d="M100 100 C 100 100, 200 0, 400 100" />
    </defs>
    <text  x=0 y=150 fill=url(#AItextcolour) stroke=Blue stroke-width=4 style=font-family:Verdana;font-size:50;font-weight:bold filter=url(#shadow_filter)>
      <textPath xlink:href="#path1">
        <tref xlink:href="#AItext" />
      </textpath>
    </text>
  </svg>
</body>

我也希望有字体大小，文本路径，笔画宽度的变量，所以也想让这些工作。所以我的问题是如何获得在搜索URL中导入的值，以便像对待AItext值一样对SVG代码进行更改？

提前感谢您的任何帮助

加雷

Answer 1

Gareth，我玩了你的例子，现在可以提供下面的解决方案。我受到了this solution的启发，因此下载了this library。解决方案并不完美，但它确实有效。让我们说，这是初稿; - ）。

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TEST variable pass</title>

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="jquery.svg.js"></script>
  <script language="JavaScript">
        function get_AI_variables() {
             var parameters = location.search.substring(1).split("&");
                document.getElementById("AItext").innerHTML = parameters[0];
                document.getElementById("AItextcolour").innerHTML = parameters[1];
        }
  </script>
</head>

<body onload="get_AI_variables()">
<div>
 <h2>Received: </h2>
 <p><b>Text: </b> <text id="AItext"/></p>
 <p><b>Fill colour: </b><text id="AItextcolour"/></p>
</div>
<script>
$(document).ready(function() {
  // https://stackoverflow.com/a/5647087/1545993
  // http://keith-wood.name/svg.html
  var parameters = location.search.substring(1).split("&");
  $('#idText').css('fill',parameters[1]);
 });
</script>
<div>
  <svg>
    <defs>
      <filter id="shadow_filter" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>

      <path id="path1"
        d="M100 100 C 100 100, 200 0, 400 100" />
    </defs>

    <text  x=0 y=150 id="idText"
      style="fill:red;
             stroke:Blue;
             stroke-width:4;
             style=font-family:Verdana;font-size:50;font-weight:bold;
             filter:url(#shadow_filter);
            ">
      <textPath xlink:href="#path1">
        <tref xlink:href="#AItext" />
      </textpath>
    </text>
  </svg>
</div>
</body>
</html>

enter image description here

在SVG中使用外部参数

1 个答案: