'Transcrypt and SVG creation here: defs
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?
Solution 1:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |