我正在尝试将PNG图像添加到SVG。我发现我需要添加以下两个代码段:
<clipPath id="circleView">
<circle cx="1500" cy="1500" r="125" fill="#FFFFFF" />
</clipPath>
<image xmlns:xlink="http://www.w3.org/1999/xlink" x="1250" y="1375" width="500" height="250" xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" clip-path="url(#circleView)" />
使用Element树python库打开主文件会将所有内容转移到ns0名称空间,因此以下代码不会执行预期的操作:
tree = ET.parse(fname)
root = tree.getroot()
xmlns = '{http://www.w3.org/2000/svg}'
cp_string = '''<clipPath id="circleView">
<circle cx="1500" cy="1500" r="125" fill="#FFFFFF" />
</clipPath>'''
img_string = '''<image xmlns:xlink="http://www.w3.org/1999/xlink" x="1250" y="1375" width="500" height="250" xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" clip-path="url(#circleView)" />'''
tree.getroot().set("xmlns:xlink", "http://www.w3.org/1999/xlink")
defs = root.find(xmlns+'defs')
cp = ET.fromstring(cp_string)
img = ET.fromstring(img_string)
defs.append(cp)
root.append(img)
tree.write('mod.svg')
输出骨架SVG如下:
`<ns0:svg xmlns:ns0="http://www.w3.org/2000/svg" xmlns:ns1="http://www.w3.org/1999/xlink" height="3000px" version="1.1" width="3000px" xmlns:xlink="http://www.w3.org/1999/xlink">
<ns0:defs>
<ns0:pattern height="10" id="checker" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:5" x1="0" x2="10" y1="0" y2="0" /><ns0:line style="stroke:black;stroke-width:4" x1="0" x2="0" y1="0" y2="10" /></ns0:pattern>
<ns0:pattern height="10" id="checker" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:2" x1="0" x2="10" y1="0" y2="0" /><ns0:line style="stroke:black;stroke-width:2" x1="0" x2="0" y1="0" y2="10" /></ns0:pattern>
<ns0:pattern height="10" id="hline" patternTransform="rotate(0 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:5" x1="0" x2="10" y1="0" y2="0" /></ns0:pattern>
<ns0:pattern height="10" id="vline" patternTransform="rotate(0 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:5" x1="0" x2="0" y1="0" y2="10" /></ns0:pattern>
<ns0:pattern height="10" id="hline-sparse" patternTransform="rotate(0 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:2" x1="0" x2="10" y1="0" y2="0" /></ns0:pattern>
<ns0:pattern height="10" id="vline-sparse" patternTransform="rotate(0 0 0)" patternUnits="userSpaceOnUse" width="10"><ns0:line style="stroke:black;stroke-width:2" x1="0" x2="0" y1="0" y2="10" /></ns0:pattern>
<clipPath id="circleView">
<circle cx="1500" cy="1500" fill="#FFFFFF" r="125" />
</clipPath></ns0:defs>
<image clip-path="url(#circleView)" height="250" width="500" x="1250" y="1375" ns1:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg" /></ns0:svg>`
SVG没有显示图像,因为(据我所知)是错误的命名空间。我可以手动编辑或硬编码,但这一切似乎都是hacky和错误。在Python中编辑SVG的正确方法是什么?