Transcrypt and SVG creation here: defs

Question

I want to create the following SVG programmatically. I have found an svg which I want to translate to transpile it into javascript code.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="pyYellow" gradientTransform="rotate(45)">
      <stop stop-color="#fe5" offset="0.6"/>
      <stop stop-color="#da1" offset="1"/>
    </linearGradient>
    <linearGradient id="pyBlue" gradientTransform="rotate(45)">
      <stop stop-color="#69f" offset="0.4"/>
      <stop stop-color="#468" offset="1"/>
    </linearGradient>
  </defs>

  <path d="M27,16c0-7,9-13,24-13c15,0,23,6,23,13l0,22c0,7-5,12-11,12l-24,0c-8,0-14,6-14,15l0,10l-9,0c-8,0-13-9-13-24c0-14,5-23,13-23l35,0l0-3l-24,0l0-9l0,0z M88,50v1" fill="url(#pyBlue)"/>
  <path d="M74,87c0,7-8,13-23,13c-15,0-24-6-24-13l0-22c0-7,6-12,12-12l24,0c8,0,14-7,14-15l0-10l9,0c7,0,13,9,13,23c0,15-6,24-13,24l-35,0l0,3l23,0l0,9l0,0z M140,50v1" fill="url(#pyYellow)"/>

  <circle r="4" cx="64" cy="88" fill="#FFF"/>
  <circle r="4" cx="37" cy="15" fill="#FFF"/>
</svg>

My code for transcrypt so far is:

class SVG:
    def __init__(self):
        self.svg   = document.createElementNS("http://www.w3.org/2000/svg", "svg")
        self.svgNS = self.svg.namespaceURI
        self.svg.setAttribute('height', 100)
        self.svg.setAttribute('width', 100)
        self.defs = document.createElementNS(self.svgNS, 'defs')
        self.gradient1 = document.createElementNS(self.svgNS, 'linearGradient')
        self.stop = document.createElementNS(self.svgNS, 'stop')
        """
        <stop stop-color="#fe5" offset="0.6"/>
        <stop stop-color="#da1" offset="1"/>
        """
        self.stop.setAttribute('offset', 0.6)
        self.stop.setAttribute('color', '#fe5')
        self.gradient1.appendChild(self.stop)
        self.stop.setAttribute('offset', 1)
        self.stop.setAttribute('color', '#da1')
        self.gradient1.appendChild(self.stop)
        self.gradient1.setAttribute('id', 'pyYellow')
        # self.gradient1.id = 'pyYellow'
        self.gradient1.setAttribute('gradientTransform', 'rotate(45)')
        self.defs.appendChild(self.gradient1)
        """
        <stop stop-color="#69f" offset="0.4"/>
        <stop stop-color="#468" offset="1"/>
        """
        self.gradient2 = document.createElementNS(self.svgNS, 'linearGradient')
        self.stop.setAttribute('offset', 0.4)
        self.stop.setAttribute('color', '#69f')
        self.gradient2.appendChild(self.stop)
        self.stop.setAttribute('offset', 1)
        self.stop.setAttribute('color', '#468')
        self.gradient2.appendChild(self.stop)
        self.gradient2.setAttribute('id', 'pyBlue')
        # self.gradient2.id = 'pyBlue'
        self.gradient2.setAttribute('gradientTransform', 'rotate(45)')
        self.defs.appendChild(self.gradient2)
        self.svg.appendChild(self.defs)

        self.p1 = document.createElementNS(self.svgNS,'path')
        self.p1.setAttribute('d', 'M27,16c0-7,9-13,24-13c15,0,23,6,23,13l0,22c0,7-5,12-11,12l-24,0c-8,0-14,6-14,15l0,10l-9,0c-8,0-13-9-13-24c0-14,5-23,13-23l35,0l0-3l-24,0l0-9l0,0z M88,50v1')
        self.p1.setAttribute('fill', 'url(#pyBlue)') # #3879B0
        self.svg.appendChild(self.p1)
        self.p2 = document.createElementNS(self.svgNS,'path')
        self.p2.setAttribute('d', 'M74,87c0,7-8,13-23,13c-15,0-24-6-24-13l0-22c0-7,6-12,12-12l24,0c8,0,14-7,14-15l0-10l9,0c7,0,13,9,13,23c0,15-6,24-13,24l-35,0l0,3l23,0l0,9l0,0z M140,50v1')
        self.p2.setAttribute('fill', 'url(#pyYellow)') # #FFDC4E
        self.svg.appendChild(self.p2)
        self.c1 = self.draw_graphic('circle', 'cx=64; cy=88; r=4; fill=#FFF')
        self.svg.appendChild(self.c1)
        self.c2 = self.draw_graphic('circle', 'cx=37; cy=15; r=4; fill=#FFF')
        self.svg.appendChild(self.c2)
        self.t1 = self.draw_graphic('text', 'x:45; y:90; font-size:20; family-font:Verdana; font-weight:bold; text-anchor:middle; fill:black')
        self.t1.textContent = "Python"
        self.svg.appendChild(self.t1)
        document.body.appendChild(self.svg)
    
    def draw_graphic(self, kind, variablen):
        graphic = document.createElementNS(self.svgNS, kind)
        variablen = variablen.replace(" ", "")
        elems = variablen.split(";")
        lelem = len(elems)
        for i in range(lelem):
            elem = elems[i]
            # console.log(elem)
            if ":" in elem:
                key, value = elem.split(":")
                graphic.setAttribute(key, value)
            elif "=" in elem:
                key, value = elem.split("=")
                graphic.setAttribute(key, value)
        return graphic

graphic = SVG()

but does not give the desired output. What is wrong? The translation seems to be right, but am I missing something? but does not give the desired output. What is wrong? The translation seems to be right, but am I missing something? but does not give the desired output. What is wrong? The translation seems to be right, but am I missing something?

Answer 1

thanks for the hint. The code works with innerHTML as well. I changed the code like so:

#!/usr/bin/env python
# -*- coding: utf-8 -*-

svg_def = """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <linearGradient id="pyYellow" gradientTransform="rotate(45)">
      <stop stop-color="#fe5" offset="0.6"/>
      <stop stop-color="#da1" offset="1"/>
    </linearGradient>
    <linearGradient id="pyBlue" gradientTransform="rotate(45)">
      <stop stop-color="#69f" offset="0.4"/>
      <stop stop-color="#468" offset="1"/>
    </linearGradient>
  </defs>

  <path d="M27,16c0-7,9-13,24-13c15,0,23,6,23,13l0,22c0,7-5,12-11,12l-24,0c-8,0-14,6-14,15l0,10l-9,0c-8,0-13-9-13-24c0-14,5-23,13-23l35,0l0-3l-24,0l0-9l0,0z M88,50v1" fill="url(#pyBlue)"/>
  <path d="M74,87c0,7-8,13-23,13c-15,0-24-6-24-13l0-22c0-7,6-12,12-12l24,0c8,0,14-7,14-15l0-10l9,0c7,0,13,9,13,23c0,15-6,24-13,24l-35,0l0,3l23,0l0,9l0,0z M140,50v1" fill="url(#pyYellow)"/>

  <circle r="4" cx="64" cy="88" fill="#FFF"/>
  <circle r="4" cx="37" cy="15" fill="#FFF"/>
</svg>"""

class SVG:
    def __init__(self):
        document.getElementById("canvas").innerHTML = svg_def

graphic = SVG()

and the html file looks like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <title>SVG</title>
    </head>
    <body>
        <div id="canvas"></div>
    </body>
    <script language="javascript" src="__javascript__/svg_14.js"></script>
</html>

and it seems to work pretty well. Thanks again for the hint