Use external parameters in SVG

Question

I am new to HTML and SVG coding and have a question

I have created a HTML template that use the URL search to import 2 varables (.i.e. AItext and AItextcolour) I am wanting to use these and pass them into the SVG code. I have managed to use the AItext to alter the text display but the AItextcolour does not seem to alter the colour of the text.

Below is the HTML code I am using

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

I will also be wanting to have variables for font size,textpath, stroke-width so would also like to get these working aswell. So my question is how do you get values that are imported in the search URL to make the alterations in the SVG code as I have done with the AItext value?

Thank you in advance for any help

Gareth

score 1 · Answer 1 · edited May 23 '17 at 12:19

Gareth, I played around with your example and can now provide the solution below. I was inspired by this solution and therefore downloaded this library. The solution is not perfect, but it works. Let's say, it's a first draft ;-).

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

Excellant :-) Cheers for this works a treat. Will play with it and will see if I can use to change the other permeters like font size, stroke-width textpath etc. — user2114573, Feb 28 '13 at 16:40
yes, this should be doable similarly, e.g. `$('#idText').css('stroke-width',parameters[2]);`... see also [how stackoverflow works](http://stackoverflow.com/faq#howtoask) `When 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. ` — Taifun, Feb 28 '13 at 17:59

Use external parameters in SVG

1 Answers1