在 SVG 中使用外部参数答案

【问题标题】：Use external parameters in SVG在 SVG 中使用外部参数
【发布时间】：2013-02-28 22:10:25
【问题描述】：

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

我创建了一个 HTML 模板，它使用 URL 搜索来导入 2 个变量（即 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 代码进行更改？

提前感谢您的任何帮助

加雷斯

【问题讨论】：

标签： html svg

【解决方案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>

【讨论】：

优秀 :-) 为这个作品欢呼是一种享受。会玩它，看看我是否可以用来更改其他参数，如字体大小、笔划宽度文本路径等。
是的，这应该同样可行，例如$('#idText').css('stroke-width',parameters[2]);...另见how stackoverflow worksWhen you have decided which answer is the most helpful to you, mark it as the accepted answer by clicking on the check box outline to the left of the answer.