3

我是 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 代码进行更改？

预先感谢您的任何帮助

加雷斯

4

1 回答 1

1

Gareth，我玩过您的示例，现在可以提供以下解决方案。我受到这个解决方案的启发，因此下载了这个库。该解决方案并不完美，但它确实有效。比方说，这是初稿;-)。

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

在此处输入图像描述

于 2013-02-28T01:47:36.557 回答