Transcrypt和SVG创建
Transcrypt和SVG创建
提问于 2022-05-10 15:44:49
嗨，我已经通过Transcrypt用Python创建了一个SVG。代码如下：
#!/usr/bin/env python
# -*- coding: utf-8 -*-
class SVG:
def __init__(self):
self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
self.svgNS = self.svg.namespaceURI
self.circle = document.createElementNS(self.svgNS,'circle')
self.svg.setAttribute('height', 300)
self.svg.setAttribute('width', 300)
self.circle.setAttribute('cx', 150)
self.circle.setAttribute('cy', 150)
self.circle.setAttribute('r', 100)
self.circle.setAttribute('stroke', 'black')
self.circle.setAttribute('stroke-width', 5)
self.circle.setAttribute('fill', 'red')
self.svg.appendChild(self.circle)
document.body.appendChild(self.svg)
self.b=document.createElement('br')
document.body.appendChild(self.b)
self.h=document.createElement('a')
self.t=document.createTextNode('A Circle')
self.h.setAttributeNS(null, 'href', 'http://www.google.com')
self.h.appendChild(self.t)
document.body.appendChild(self.h)
graphic = SVG()这在用transcrypt编译时工作得很好。但如果我将代码改为：
# svg_10.py
class SVG:
def __init__(self):
self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
self.svgNS = self.svg.namespaceURI
r1_vars = {'x': 10, 'y': 10, 'width': 100, 'height': 20, 'fill':'#ff00ff'}
self.r1 = self.draw_graphic('rect', r1_vars)
self.svg.appendChild(self.r1)
r2_vars = {'x': 20, 'y': 40, 'width': 100, 'height': 40, 'rx': 8, 'ry': 8, 'fill': 'pink', 'stroke':'purple', 'strokeWidth':7 }
self.r2 = self.draw_graphic('rect', r2_vars)
self.svg.appendChild(self.r2)
document.body.appendChild(self.svg)
def draw_graphic(self, kind, vars):
graphic = document.createElementNS(self.svgNS, kind)
for key in vars.keys():
graphic.setAttribute(key, vars[key])
return graphic
graphic = SVG()我没有得到任何输出，尽管transcrypt运行没有抱怨。哪里出了问题？用于显示它的html代码是：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG</title>
</head>
<body>
</body>
<script language="javascript" src="__javascript__/svg_10.js"></script>
</html>仍然使用transcrypt3.6，所以头是不同的。如果使用较新的版本，请将其更改为：
<script type="module">import * as svg_10 from './__target__/svg_10.js';window.svg_10 = svg_10;</script>回答 1
Stack Overflow用户
发布于 2022-05-10 16:42:32
Hm，刚刚发现以下代码似乎起作用了：
#!/usr/bin/env python
# -*- coding: utf-8 -*-
class SVG:
def __init__(self):
self.svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
self.svgNS = self.svg.namespaceURI
self.r1 = self.draw_graphic('rect', 'x:10; y:10; width:100; height:20; fill:#ff00ff')
self.svg.appendChild(self.r1)
self.r2 = self.draw_graphic('rect', 'x:20; y:40; width:100; height:40; rx:15; ry:15; fill:pink; stroke:purple; strokeWidth:7')
self.svg.appendChild(self.r2)
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)
return graphic
graphic = SVG()页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72189365
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号