CODEWITHSUNDEEP
htmlsvg
user2114573
user2114573

Reputation: 57

Use external parameters in SVG

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

Upvotes: 3

Views: 3737

Answers (1)

Taifun
Taifun

Reputation: 6293

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

Upvotes: 0

Related Questions