如何将SVG导入/转换为Draw.io原生形状?
将SVG转换为Draw.io原生形状以应用样式的方法
我正在寻找一款支持导入复杂形状并保留页面样式的绘图编辑器,Draw.io看起来很有潜力,但它主要支持SVG导入或原始XML输入,没有可视化(WYSIWYG)编辑界面。
StackOverflow上的相关问题都无法解决我的具体需求,比如有的仅介绍了导入SVG后修改颜色的流程。
为说明问题,我提供了两张截图:左侧是导入的SVG,右侧是标准Draw.io形状。可以看到,SVG只能修改Fill .cls-1或Line .cls-1这类属性,而标准形状可分配独特样式。


请问是否存在将SVG转换为Draw.io原生形状以应用样式的方法?
我尝试了手动转换SVG:
原SVG代码:
<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.5 91.5"> <defs> <style> .cls-1 { fill: none; stroke: #231f20; stroke-miterlimit: 10; } </style> </defs> <g id="Layer_1-2" data-name="Layer 1"> <rect class="cls-1" x=".5" y=".5" width="90.5" height="90.5"/> <polygon class="cls-1" points="61.09 19.17 30.4 19.17 15.06 45.75 30.4 72.32 61.09 72.32 76.44 45.75 61.09 19.17"/> <line class="cls-1" x1="30.4" y1="72.32" x2="61.09" y2="19.17"/> <line class="cls-1" x1="76.44" y1="45.75" x2="15.86" y2="45.75"/> <line class="cls-1" x1="30.4" y1="19.17" x2="61.09" y2="72.32"/> </g> </svg>
转换后的Draw.io形状语言代码:
<shape aspect="variable" h="90.5" w="90.5" strokewidth="inherit"> <background> <rect h="90.5" w="90.5" x="0.5" y=".5"/> </background> <foreground> <fillstroke /> <path> <move x="61.09" y="19.17"/> <line x="30.4" y="19.17"/> <line x="15.06" y="45.75"/> <line x="30.4" y="72.32"/> <line x="30.4" y="72.32"/> <line x="61.09" y="72.32"/> <line x="76.44" y="45.75"/> <line x="61.09" y="19.17"/> </path> <stroke /> <path> <move x="30.4" y="72.32"/> <line x="61.09" y="19.17"/> </path> <stroke /> <path> <move x="76.44" y="45.75"/> <line x="15.86" y="45.75"/> </path> <stroke /> <path> <move x="30.4" y="19.17"/> <line x="61.09" y="72.32"/> </path> <stroke /> </foreground> </shape>
内容的提问来源于stack exchange,提问作者nowox
相关产品推荐
相关产品推荐

