文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >SVG到SVG(?)转换

问SVG到SVG(?)转换
EN

Stack Overflow用户
提问于 2022-05-23 20:49:10
回答 3查看 107关注 0票数 0

我有AWS的资源图标的SVG格式。以下是一个例子：

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark</title>
    <g id="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M10.298,22.955 L8.298,22.969 C8.333,27.982 10.654,32.573 14.668,35.564 C17.503,37.677 20.819,38.696 24.109,38.696 C28.942,38.696 33.717,36.496 36.82,32.332 C42.036,25.334 40.587,15.396 33.589,10.18 C26.813,5.13 17.297,6.345 11.963,12.775 L12,10.014 L10,9.987 L9.933,14.987 C9.929,15.252 10.031,15.508 10.216,15.698 C10.402,15.888 10.654,15.997 10.919,16 L15.986,16.068 L16.014,14.068 L13.513,14.035 C18.176,8.43 26.479,7.376 32.394,11.783 C38.507,16.341 39.774,25.023 35.217,31.137 C30.658,37.251 21.979,38.517 15.863,33.96 C12.357,31.347 10.328,27.335 10.298,22.955 L10.298,22.955 Z M24,19 C21.794,19 20,20.795 20,23 C20,25.206 21.794,27 24,27 C26.206,27 28,25.206 28,23 C28,20.795 26.206,19 24,19 L24,19 Z M16.946,28.78 L19.175,26.552 C18.441,25.556 18,24.33 18,23 C18,21.622 18.473,20.353 19.257,19.339 L16.947,17.191 L18.309,15.727 L20.729,17.977 C21.671,17.362 22.793,17 24,17 C25.342,17 26.577,17.448 27.577,18.195 L29.982,15.726 L31.414,17.121 L28.965,19.636 C29.617,20.597 30,21.754 30,23 C30,24.252 29.613,25.415 28.955,26.377 L31.414,28.756 L30.024,30.194 L27.565,27.815 C26.567,28.556 25.336,29 24,29 C22.742,29 21.574,28.61 20.61,27.946 L18.361,30.194 L16.946,28.78 Z M35,44 L39,44 L39,43 L35,43 L35,44 Z M9,44 L13,44 L13,43 L9,43 L9,44 Z M46,3 L46,42 C46,42.553 45.553,43 45,43 L41,43 L41,45 C41,45.553 40.553,46 40,46 L34,46 C33.447,46 33,45.553 33,45 L33,43 L15,43 L15,45 C15,45.553 14.553,46 14,46 L8,46 C7.447,46 7,45.553 7,45 L7,43 L3,43 C2.447,43 2,42.553 2,42 L2,33 L4,33 L4,41 L44,41 L44,4 L4,4 L4,11 L2,11 L2,3 C2,2.448 2.447,2 3,2 L45,2 C45.553,2 46,2.448 46,3 L46,3 Z M2,27 L4,27 L4,17 L2,17 L2,27 Z" id="Fill-1" fill="#6CAE3E"></path>
    </g>
</svg>

Draw.io (diagrams.net)从包含数百个形状标记的xml文件中检索它们的图标图像。其中之一如下：

完整xml文件来源：https://github.com/jgraph/drawio/blob/dev/src/main/webapp/stencils/aws4.xml

代码语言：javascript
复制
<shape aspect="fixed" h="47.651" name="backup" strokewidth="inherit" w="49.458">
    <connections/>
    <foreground>
        <path>
            <move x="24.731" y="0.045"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="21.02" x-axis-rotation="0" y="5.006"/>
            <line x="6.458" y="15.131"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="1" x="6.456" x-axis-rotation="0" y="15.129"/>
            <arc large-arc-flag="1" rx="4" ry="4" sweep-flag="0" x="4.337" x-axis-rotation="0" y="22.522"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="4.358" x-axis-rotation="0" y="22.522"/>
            <line x="9.964" y="40.742"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="12.708" x-axis-rotation="0" y="47.651"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="16.589" x-axis-rotation="0" y="44.6"/>
            <line x="33.206" y="44.6"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="37.087" x-axis-rotation="0" y="47.651"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.087" x-axis-rotation="0" y="43.651"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="39.749" x-axis-rotation="0" y="40.668"/>
            <line x="45.235" y="22.51"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="45.458" x-axis-rotation="0" y="22.522"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="49.458" x-axis-rotation="0" y="18.522"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.36" x-axis-rotation="0" y="15.117"/>
            <line x="28.796" y="4.922"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="28.897" x-axis-rotation="0" y="4.041"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="24.731" x-axis-rotation="0" y="0.045"/>
            <close/>
            <move x="24.897" y="1.951"/>
            <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="26.958" x-axis-rotation="0" y="4.01"/>
            <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="24.897" x-axis-rotation="0" y="1.951"/>
            <close/>
            <move x="27.88" y="6.7"/>
            <line x="41.973" y="16.563"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.538" x-axis-rotation="0" y="19.295"/>
            <line x="36.692" y="21.373"/>
            <line x="37.472" y="23.194"/>
            <line x="42.391" y="21.084"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.343" x-axis-rotation="0" y="21.91"/>
            <line x="37.952" y="39.75"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="35.774" x-axis-rotation="0" y="39.873"/>
            <line x="33.337" y="36.215"/>
            <line x="31.69" y="37.313"/>
            <line x="34.126" y="40.965"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="33.227" x-axis-rotation="0" y="42.621"/>
            <line x="16.567" y="42.621"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="15.665" x-axis-rotation="0" y="40.961"/>
            <line x="18.097" y="37.313"/>
            <line x="16.448" y="36.215"/>
            <line x="14.009" y="39.873"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="11.737" x-axis-rotation="0" y="39.772"/>
            <line x="6.274" y="22.016"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.405" x-axis-rotation="0" y="21.086"/>
            <line x="12.319" y="23.194"/>
            <line x="13.1" y="21.373"/>
            <line x="8.259" y="19.297"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="8.337" x-axis-rotation="0" y="18.522"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.835" x-axis-rotation="0" y="16.582"/>
            <line x="21.966" y="6.758"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="23.907" x-axis-rotation="0" y="7.91"/>
            <line x="23.907" y="12.381"/>
            <line x="25.888" y="12.381"/>
            <line x="25.888" y="7.912"/>
            <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="27.88" x-axis-rotation="0" y="6.7"/>
            <close/>
            <move x="24.593" y="15.366"/>
            <arc large-arc-flag="0" rx="10.24" ry="10.24" sweep-flag="0" x="17.807" x-axis-rotation="0" y="18.246"/>
            <line x="17.698" y="16.701"/>
            <line x="15.698" y="16.84"/>
            <line x="15.977" y="20.641"/>
            <arc large-arc-flag="0" rx="1" ry="1" sweep-flag="0" x="16.977" x-axis-rotation="0" y="21.551"/>
            <line x="17.048" y="21.59"/>
            <line x="20.847" y="21.311"/>
            <line x="20.698" y="19.311"/>
            <line x="19.497" y="19.393"/>
            <arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="29.837" x-axis-rotation="0" y="18.991"/>
            <arc large-arc-flag="0" rx="8.25" ry="8.25" sweep-flag="1" x="31.528" x-axis-rotation="0" y="30.541"/>
            <arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="19.977" x-axis-rotation="0" y="32.231"/>
            <arc large-arc-flag="0" rx="8.15" ry="8.15" sweep-flag="1" x="16.657" x-axis-rotation="0" y="25.66"/>
            <line x="14.657" y="25.66"/>
            <arc large-arc-flag="0" rx="10.22" ry="10.22" sweep-flag="0" x="24.887" x-axis-rotation="0" y="35.82"/>
            <line x="24.897" y="35.84"/>
            <arc large-arc-flag="1" rx="10.24" ry="10.24" sweep-flag="0" x="24.593" x-axis-rotation="0" y="15.366"/>
            <close/>
            <move x="4.337" y="16.42"/>
            <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="6.337" x-axis-rotation="0" y="18.481"/>
            <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="4.337" x-axis-rotation="0" y="16.42"/>
            <close/>
            <move x="45.458" y="16.42"/>
            <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="47.516" x-axis-rotation="0" y="18.481"/>
            <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="45.458" x-axis-rotation="0" y="16.42"/>
            <close/>
            <move x="12.708" y="41.561"/>
            <arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="14.766" x-axis-rotation="0" y="43.561"/>
            <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="12.708" x-axis-rotation="0" y="41.561"/>
            <close/>
            <move x="37.087" y="41.561"/>
            <arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="39.138" x-axis-rotation="0" y="43.561"/>
            <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="37.087" x-axis-rotation="0" y="41.561"/>
            <close/>
        </path>
        <fill/>
    </foreground>
</shape>

不确定上面的是否是SVG。但是，它们似乎都有path标记。有没有办法把第一个转换成第二个的格式？

谢谢。

xml
svg
vector-graphics
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-05-25 06:18:04

可以使用XSLT完成从一种XML格式到另一种XML格式的转换。基本上，您为转换创建了一个“样式表”，然后使用像xsltproc或SAXON XSLT处理器这样的应用程序进行转换(教程：xsltproc的XSLT处理)。

您可以阅读更多关于XSL (XPath等)的内容。这里：XSLT导言。

在本例中，我将使用Saxon处理器，因为我需要XSLT2.0 (XPath、XQuery和XSLT函数引用)中的一些函数。要求的部分是将<path>的<path>属性的值转换为元素。

在给出的示例中，我有以下SVG、XSL和XML文档。

SVG文件：

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark</title>
  <g id="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path d="M10.298,22.955 L8.298,22.969 C8.333,27.982 10.654,32.573 14.668,35.564 C17.503,37.677 20.819,38.696 24.109,38.696 C28.942,38.696 33.717,36.496 36.82,32.332 C42.036,25.334 40.587,15.396 33.589,10.18 C26.813,5.13 17.297,6.345 11.963,12.775 L12,10.014 L10,9.987 L9.933,14.987 C9.929,15.252 10.031,15.508 10.216,15.698 C10.402,15.888 10.654,15.997 10.919,16 L15.986,16.068 L16.014,14.068 L13.513,14.035 C18.176,8.43 26.479,7.376 32.394,11.783 C38.507,16.341 39.774,25.023 35.217,31.137 C30.658,37.251 21.979,38.517 15.863,33.96 C12.357,31.347 10.328,27.335 10.298,22.955 L10.298,22.955 Z M24,19 C21.794,19 20,20.795 20,23 C20,25.206 21.794,27 24,27 C26.206,27 28,25.206 28,23 C28,20.795 26.206,19 24,19 L24,19 Z M16.946,28.78 L19.175,26.552 C18.441,25.556 18,24.33 18,23 C18,21.622 18.473,20.353 19.257,19.339 L16.947,17.191 L18.309,15.727 L20.729,17.977 C21.671,17.362 22.793,17 24,17 C25.342,17 26.577,17.448 27.577,18.195 L29.982,15.726 L31.414,17.121 L28.965,19.636 C29.617,20.597 30,21.754 30,23 C30,24.252 29.613,25.415 28.955,26.377 L31.414,28.756 L30.024,30.194 L27.565,27.815 C26.567,28.556 25.336,29 24,29 C22.742,29 21.574,28.61 20.61,27.946 L18.361,30.194 L16.946,28.78 Z M35,44 L39,44 L39,43 L35,43 L35,44 Z M9,44 L13,44 L13,43 L9,43 L9,44 Z M46,3 L46,42 C46,42.553 45.553,43 45,43 L41,43 L41,45 C41,45.553 40.553,46 40,46 L34,46 C33.447,46 33,45.553 33,45 L33,43 L15,43 L15,45 C15,45.553 14.553,46 14,46 L8,46 C7.447,46 7,45.553 7,45 L7,43 L3,43 C2.447,43 2,42.553 2,42 L2,33 L4,33 L4,41 L44,41 L44,4 L4,4 L4,11 L2,11 L2,3 C2,2.448 2.447,2 3,2 L45,2 C45.553,2 46,2.448 46,3 L46,3 Z M2,27 L4,27 L4,17 L2,17 L2,27 Z" id="Fill-1" fill="#6CAE3E"></path>
  </g>
</svg>

XSL文档：

代码语言：javascript
复制
<?xml version="1.0"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:svg="http://www.w3.org/2000/svg" exclude-result-prefixes="svg">
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>

  <xsl:template match="/">
    <xsl:apply-templates />
  </xsl:template>

  <xsl:template match="svg:svg">
    <shapes name="mxgraph.aws4">
      <shape aspect="fixed" h="{replace(@height, 'px', '')}"
        name="{svg:title}" strokewidth="inherit" w="{replace(@width, 'px', '')}">
        <connections/>
        <foreground>
          <xsl:apply-templates />
        </foreground>
      </shape>
    </shapes>
  </xsl:template>

  <xsl:template match="svg:g">
    <xsl:apply-templates />
  </xsl:template>
  
  <xsl:template match="svg:path">
    <xsl:variable name="d1" select="replace(@d,'M','*M')"/>
    <xsl:variable name="d2" select="replace($d1,'L','*L')"/>
    <xsl:variable name="d3" select="replace($d2,'A','*A')"/>
    <xsl:variable name="d4" select="replace($d3,'C','*C')"/>
    <xsl:variable name="d5" select="replace($d4,'Z','*Z')"/>
    <xsl:variable name="d" select="tokenize($d5,'\*+')"/>
    <xsl:for-each select="$d">
      <xsl:variable name="comkey" select="substring(.,1,1)"/>
      <xsl:variable name="comline" select="normalize-space(substring(.,2))"/>
      <xsl:choose>
        <xsl:when test="$comkey = 'M'">
          <xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
          <move x="{$comlinespace[1]}" y="{$comlinespace[2]}"/>
        </xsl:when>
        <xsl:when test="$comkey = 'L'">
          <xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
          <line x="{$comlinespace[1]}" y="{$comlinespace[2]}"/>
        </xsl:when>
        <xsl:when test="$comkey = 'A'">
          <xsl:variable name="comlinespace" select="tokenize(replace($comline,',', ' '),' ')"/>
          <arc rx="{$comlinespace[1]}" ry="{$comlinespace[2]}"
            x-axis-rotation="{$comlinespace[3]}"
            large-arc-flag="{$comlinespace[4]}"
            sweep-flag="{$comlinespace[5]}"
            x="{$comlinespace[6]}" y="{$comlinespace[7]}"/>
        </xsl:when>
        <xsl:when test="$comkey = 'C'">
          <xsl:variable name="comlinespace" select="tokenize($comline,' ')"/>
          <curve>
            <xsl:for-each select="$comlinespace">
              <xsl:variable name="points" select="tokenize(.,',')"/>
              <xsl:attribute name="x{position()}">
                <xsl:value-of select="$points[1]"/>
              </xsl:attribute>
              <xsl:attribute name="y{position()}">
                <xsl:value-of select="$points[2]"/>
              </xsl:attribute>
            </xsl:for-each>
          </curve>
        </xsl:when>
        <xsl:when test="$comkey = 'Z'">
          <close/>
        </xsl:when>
      </xsl:choose>
    </xsl:for-each>
  </xsl:template>

  <xsl:template match="text()"></xsl:template>
</xsl:stylesheet>

应用该命令：

代码语言：javascript
复制
saxonb-xslt -o svgaws.xml svg.svg convert.xsl

我生成以下XML文档。

XML文档：

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<shapes name="mxgraph.aws4">
   <shape aspect="fixed" h="48"
          name="Icon-Resource/Storage/Res_AWS-Backup_Backup-Vault_48_Dark"
          strokewidth="inherit"
          w="48px">
      <connections/>
      <foreground>
         <move x="10.298" y="22.955"/>
         <line x="8.298" y="22.969"/>
         <curve x1="8.333" y1="27.982" x2="10.654" y2="32.573" x3="14.668" y3="35.564"/>
         <curve x1="17.503" y1="37.677" x2="20.819" y2="38.696" x3="24.109" y3="38.696"/>
         <curve x1="28.942" y1="38.696" x2="33.717" y2="36.496" x3="36.82" y3="32.332"/>
         <curve x1="42.036" y1="25.334" x2="40.587" y2="15.396" x3="33.589" y3="10.18"/>
         <curve x1="26.813" y1="5.13" x2="17.297" y2="6.345" x3="11.963" y3="12.775"/>
         <line x="12" y="10.014"/>
         <line x="10" y="9.987"/>
         <line x="9.933" y="14.987"/>
         <curve x1="9.929" y1="15.252" x2="10.031" y2="15.508" x3="10.216" y3="15.698"/>
         <curve x1="10.402" y1="15.888" x2="10.654" y2="15.997" x3="10.919" y3="16"/>
         <line x="15.986" y="16.068"/>
         <line x="16.014" y="14.068"/>
         <line x="13.513" y="14.035"/>
         <curve x1="18.176" y1="8.43" x2="26.479" y2="7.376" x3="32.394" y3="11.783"/>
         <curve x1="38.507" y1="16.341" x2="39.774" y2="25.023" x3="35.217" y3="31.137"/>
         <curve x1="30.658" y1="37.251" x2="21.979" y2="38.517" x3="15.863" y3="33.96"/>
         <curve x1="12.357" y1="31.347" x2="10.328" y2="27.335" x3="10.298" y3="22.955"/>
         <line x="10.298" y="22.955"/>
         <close/>
         <move x="24" y="19"/>
         <curve x1="21.794" y1="19" x2="20" y2="20.795" x3="20" y3="23"/>
         <curve x1="20" y1="25.206" x2="21.794" y2="27" x3="24" y3="27"/>
         <curve x1="26.206" y1="27" x2="28" y2="25.206" x3="28" y3="23"/>
         <curve x1="28" y1="20.795" x2="26.206" y2="19" x3="24" y3="19"/>
         <line x="24" y="19"/>
         <close/>
         <move x="16.946" y="28.78"/>
         <line x="19.175" y="26.552"/>
         <curve x1="18.441" y1="25.556" x2="18" y2="24.33" x3="18" y3="23"/>
         <curve x1="18" y1="21.622" x2="18.473" y2="20.353" x3="19.257" y3="19.339"/>
         <line x="16.947" y="17.191"/>
         <line x="18.309" y="15.727"/>
         <line x="20.729" y="17.977"/>
         <curve x1="21.671" y1="17.362" x2="22.793" y2="17" x3="24" y3="17"/>
         <curve x1="25.342" y1="17" x2="26.577" y2="17.448" x3="27.577" y3="18.195"/>
         <line x="29.982" y="15.726"/>
         <line x="31.414" y="17.121"/>
         <line x="28.965" y="19.636"/>
         <curve x1="29.617" y1="20.597" x2="30" y2="21.754" x3="30" y3="23"/>
         <curve x1="30" y1="24.252" x2="29.613" y2="25.415" x3="28.955" y3="26.377"/>
         <line x="31.414" y="28.756"/>
         <line x="30.024" y="30.194"/>
         <line x="27.565" y="27.815"/>
         <curve x1="26.567" y1="28.556" x2="25.336" y2="29" x3="24" y3="29"/>
         <curve x1="22.742" y1="29" x2="21.574" y2="28.61" x3="20.61" y3="27.946"/>
         <line x="18.361" y="30.194"/>
         <line x="16.946" y="28.78"/>
         <close/>
         <move x="35" y="44"/>
         <line x="39" y="44"/>
         <line x="39" y="43"/>
         <line x="35" y="43"/>
         <line x="35" y="44"/>
         <close/>
         <move x="9" y="44"/>
         <line x="13" y="44"/>
         <line x="13" y="43"/>
         <line x="9" y="43"/>
         <line x="9" y="44"/>
         <close/>
         <move x="46" y="3"/>
         <line x="46" y="42"/>
         <curve x1="46" y1="42.553" x2="45.553" y2="43" x3="45" y3="43"/>
         <line x="41" y="43"/>
         <line x="41" y="45"/>
         <curve x1="41" y1="45.553" x2="40.553" y2="46" x3="40" y3="46"/>
         <line x="34" y="46"/>
         <curve x1="33.447" y1="46" x2="33" y2="45.553" x3="33" y3="45"/>
         <line x="33" y="43"/>
         <line x="15" y="43"/>
         <line x="15" y="45"/>
         <curve x1="15" y1="45.553" x2="14.553" y2="46" x3="14" y3="46"/>
         <line x="8" y="46"/>
         <curve x1="7.447" y1="46" x2="7" y2="45.553" x3="7" y3="45"/>
         <line x="7" y="43"/>
         <line x="3" y="43"/>
         <curve x1="2.447" y1="43" x2="2" y2="42.553" x3="2" y3="42"/>
         <line x="2" y="33"/>
         <line x="4" y="33"/>
         <line x="4" y="41"/>
         <line x="44" y="41"/>
         <line x="44" y="4"/>
         <line x="4" y="4"/>
         <line x="4" y="11"/>
         <line x="2" y="11"/>
         <line x="2" y="3"/>
         <curve x1="2" y1="2.448" x2="2.447" y2="2" x3="3" y3="2"/>
         <line x="45" y="2"/>
         <curve x1="45.553" y1="2" x2="46" y2="2.448" x3="46" y3="3"/>
         <line x="46" y="3"/>
         <close/>
         <move x="2" y="27"/>
         <line x="4" y="27"/>
         <line x="4" y="17"/>
         <line x="2" y="17"/>
         <line x="2" y="27"/>
         <close/>
      </foreground>
   </shape>
</shapes>
票数 1
EN

Stack Overflow用户

发布于 2022-05-23 20:58:36

这看起来不像SVG。它可能是自己的XML格式。

考虑到第一个不是关系图，我看不出如何直接将任何SVG转换成一个图表--表示draw.io XML文件；特别是，因为第二个-style显示的是“移动、绘制、移动”-style绘图突击队，这与SVG的工作方式完全不同。

因此，长话短说:虽然SVG的子集当然可能只包含直线和archs，但您需要实现一个生成器，以便自己从SVG中执行必要的移动和绘制指令。这并不简单，因为SVG允许所有这些元素的作用域、组和转换。

票数 1
EN

Stack Overflow用户

发布于 2022-05-24 07:07:16

我误解了这个问题。我将保留这个答案(也许有人会发现它有用)，但是添加另一个更正确的答案。

可以使用XSLT完成从一种XML格式到另一种XML格式的转换。基本上，您为转换创建了一个“样式表”，然后使用像xsltproc这样的应用程序进行转换(教程：xsltproc的XSLT处理)。

您可以阅读更多关于XSL (XPath等)的内容。这里：XSLT导言。

更新

在给出的示例中，我有以下XML、XSL和SVG文档。

XML文档(draw.xml)：

代码语言：javascript
复制
<?xml version="1.0" encoding="UTF-8"?>
<shapes name="mxgraph.aws4">
  <shape aspect="fixed" h="47.651" name="backup" strokewidth="inherit" w="49.458">
    <connections/>
      <foreground>
        <path>
          <move x="24.731" y="0.045"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="21.02" x-axis-rotation="0" y="5.006"/>
          <line x="6.458" y="15.131"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="1" x="6.456" x-axis-rotation="0" y="15.129"/>
          <arc large-arc-flag="1" rx="4" ry="4" sweep-flag="0" x="4.337" x-axis-rotation="0" y="22.522"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="4.358" x-axis-rotation="0" y="22.522"/>
          <line x="9.964" y="40.742"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="12.708" x-axis-rotation="0" y="47.651"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="16.589" x-axis-rotation="0" y="44.6"/>
          <line x="33.206" y="44.6"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="37.087" x-axis-rotation="0" y="47.651"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.087" x-axis-rotation="0" y="43.651"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="39.749" x-axis-rotation="0" y="40.668"/>
          <line x="45.235" y="22.51"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="45.458" x-axis-rotation="0" y="22.522"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="49.458" x-axis-rotation="0" y="18.522"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.36" x-axis-rotation="0" y="15.117"/>
          <line x="28.796" y="4.922"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="28.897" x-axis-rotation="0" y="4.041"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="24.731" x-axis-rotation="0" y="0.045"/>
          <close/>
          <move x="24.897" y="1.951"/>
          <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="26.958" x-axis-rotation="0" y="4.01"/>
          <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="24.897" x-axis-rotation="0" y="1.951"/>
          <close/>
          <move x="27.88" y="6.7"/>
          <line x="41.973" y="16.563"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="41.538" x-axis-rotation="0" y="19.295"/>
          <line x="36.692" y="21.373"/>
          <line x="37.472" y="23.194"/>
          <line x="42.391" y="21.084"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="43.343" x-axis-rotation="0" y="21.91"/>
          <line x="37.952" y="39.75"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="35.774" x-axis-rotation="0" y="39.873"/>
          <line x="33.337" y="36.215"/>
          <line x="31.69" y="37.313"/>
          <line x="34.126" y="40.965"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="33.227" x-axis-rotation="0" y="42.621"/>
          <line x="16.567" y="42.621"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="15.665" x-axis-rotation="0" y="40.961"/>
          <line x="18.097" y="37.313"/>
          <line x="16.448" y="36.215"/>
          <line x="14.009" y="39.873"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="11.737" x-axis-rotation="0" y="39.772"/>
          <line x="6.274" y="22.016"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.405" x-axis-rotation="0" y="21.086"/>
          <line x="12.319" y="23.194"/>
          <line x="13.1" y="21.373"/>
          <line x="8.259" y="19.297"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="8.337" x-axis-rotation="0" y="18.522"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="7.835" x-axis-rotation="0" y="16.582"/>
          <line x="21.966" y="6.758"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="23.907" x-axis-rotation="0" y="7.91"/>
          <line x="23.907" y="12.381"/>
          <line x="25.888" y="12.381"/>
          <line x="25.888" y="7.912"/>
          <arc large-arc-flag="0" rx="4" ry="4" sweep-flag="0" x="27.88" x-axis-rotation="0" y="6.7"/>
          <close/>
          <move x="24.593" y="15.366"/>
          <arc large-arc-flag="0" rx="10.24" ry="10.24" sweep-flag="0" x="17.807" x-axis-rotation="0" y="18.246"/>
          <line x="17.698" y="16.701"/>
          <line x="15.698" y="16.84"/>
          <line x="15.977" y="20.641"/>
          <arc large-arc-flag="0" rx="1" ry="1" sweep-flag="0" x="16.977" x-axis-rotation="0" y="21.551"/>
          <line x="17.048" y="21.59"/>
          <line x="20.847" y="21.311"/>
          <line x="20.698" y="19.311"/>
          <line x="19.497" y="19.393"/>
          <arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="29.837" x-axis-rotation="0" y="18.991"/>
          <arc large-arc-flag="0" rx="8.25" ry="8.25" sweep-flag="1" x="31.528" x-axis-rotation="0" y="30.541"/>
          <arc large-arc-flag="0" rx="8.26" ry="8.26" sweep-flag="1" x="19.977" x-axis-rotation="0" y="32.231"/>
          <arc large-arc-flag="0" rx="8.15" ry="8.15" sweep-flag="1" x="16.657" x-axis-rotation="0" y="25.66"/>
          <line x="14.657" y="25.66"/>
          <arc large-arc-flag="0" rx="10.22" ry="10.22" sweep-flag="0" x="24.887" x-axis-rotation="0" y="35.82"/>
          <line x="24.897" y="35.84"/>
          <arc large-arc-flag="1" rx="10.24" ry="10.24" sweep-flag="0" x="24.593" x-axis-rotation="0" y="15.366"/>
          <close/>
          <move x="4.337" y="16.42"/>
          <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="6.337" x-axis-rotation="0" y="18.481"/>
          <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="4.337" x-axis-rotation="0" y="16.42"/>
          <close/>
          <move x="45.458" y="16.42"/>
          <arc large-arc-flag="0" rx="2.06" ry="2.06" sweep-flag="1" x="47.516" x-axis-rotation="0" y="18.481"/>
          <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="45.458" x-axis-rotation="0" y="16.42"/>
          <close/>
          <move x="12.708" y="41.561"/>
          <arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="14.766" x-axis-rotation="0" y="43.561"/>
          <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="12.708" x-axis-rotation="0" y="41.561"/>
          <close/>
          <move x="37.087" y="41.561"/>
          <arc large-arc-flag="0" rx="2.05" ry="2.05" sweep-flag="1" x="39.138" x-axis-rotation="0" y="43.561"/>
          <arc large-arc-flag="1" rx="2.06" ry="2.06" sweep-flag="1" x="37.087" x-axis-rotation="0" y="41.561"/>
          <close/>
      </path>
      <fill/>
    </foreground>
  </shape>
</shapes>

XSL文档(convert.xsl)：

代码语言：javascript
复制
<?xml version="1.0"?>
  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/2000/svg">
  <xsl:template match="/">
    <xsl:apply-templates />
  </xsl:template>

  <xsl:template match="shapes">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
      <xsl:apply-templates />
    </svg>
  </xsl:template>

  <xsl:template match="shape">
    <g id="{@name}">
      <xsl:apply-templates />
    </g>
  </xsl:template>
  
  <xsl:template match="path">
     <path>
       <xsl:attribute name="d">
         <xsl:apply-templates />
       </xsl:attribute>
     </path>
  </xsl:template>

  <xsl:template match="move">
    <xsl:text>M </xsl:text>
    <xsl:value-of select="@x"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@y"/>
  </xsl:template>

  <xsl:template match="line">
    <xsl:text>L </xsl:text>
    <xsl:value-of select="@x"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@y"/>
  </xsl:template>

  <xsl:template match="arc">
    <xsl:text>A </xsl:text>
    <xsl:value-of select="@rx"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@ry"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@x-axis-rotation"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@large-arc-flag"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@sweep-flag"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@x"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@y"/>
  </xsl:template>
  
  <xsl:template match="text()">
  </xsl:template>
</xsl:stylesheet>

应用该命令：

代码语言：javascript
复制
xsltproc -o draw.svg convert.xsl draw.xml

我生成以下SVG文档。

SVG文档(draw.svg)：

​

代码语言：javascript
复制
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
  <g id="backup">
  <path d="M 24.731 0.045A 4 4 0 0 0 21.02 5.006L 6.458 15.131A 4 4 0 0 1 6.456 15.129A 4 4 0 1 0 4.337 22.522A 4 4 0 0 0 4.358 22.522L 9.964 40.742A 4 4 0 0 0 12.708 47.651A 4 4 0 0 0 16.589 44.6L 33.206 44.6A 4 4 0 0 0 37.087 47.651A 4 4 0 0 0 41.087 43.651A 4 4 0 0 0 39.749 40.668L 45.235 22.51A 4 4 0 0 0 45.458 22.522A 4 4 0 0 0 49.458 18.522A 4 4 0 0 0 43.36 15.117L 28.796 4.922A 4 4 0 0 0 28.897 4.041A 4 4 0 0 0 24.731 0.045M 24.897 1.951A 2.06 2.06 0 0 1 26.958 4.01A 2.06 2.06 0 1 1 24.897 1.951M 27.88 6.7L 41.973 16.563A 4 4 0 0 0 41.538 19.295L 36.692 21.373L 37.472 23.194L 42.391 21.084A 4 4 0 0 0 43.343 21.91L 37.952 39.75A 4 4 0 0 0 35.774 39.873L 33.337 36.215L 31.69 37.313L 34.126 40.965A 4 4 0 0 0 33.227 42.621L 16.567 42.621A 4 4 0 0 0 15.665 40.961L 18.097 37.313L 16.448 36.215L 14.009 39.873A 4 4 0 0 0 11.737 39.772L 6.274 22.016A 4 4 0 0 0 7.405 21.086L 12.319 23.194L 13.1 21.373L 8.259 19.297A 4 4 0 0 0 8.337 18.522A 4 4 0 0 0 7.835 16.582L 21.966 6.758A 4 4 0 0 0 23.907 7.91L 23.907 12.381L 25.888 12.381L 25.888 7.912A 4 4 0 0 0 27.88 6.7M 24.593 15.366A 10.24 10.24 0 0 0 17.807 18.246L 17.698 16.701L 15.698 16.84L 15.977 20.641A 1 1 0 0 0 16.977 21.551L 17.048 21.59L 20.847 21.311L 20.698 19.311L 19.497 19.393A 8.26 8.26 0 0 1 29.837 18.991A 8.25 8.25 0 0 1 31.528 30.541A 8.26 8.26 0 0 1 19.977 32.231A 8.15 8.15 0 0 1 16.657 25.66L 14.657 25.66A 10.22 10.22 0 0 0 24.887 35.82L 24.897 35.84A 10.24 10.24 0 1 0 24.593 15.366M 4.337 16.42A 2.06 2.06 0 0 1 6.337 18.481A 2.06 2.06 0 1 1 4.337 16.42M 45.458 16.42A 2.06 2.06 0 0 1 47.516 18.481A 2.06 2.06 0 1 1 45.458 16.42M 12.708 41.561A 2.05 2.05 0 0 1 14.766 43.561A 2.06 2.06 0 1 1 12.708 41.561M 37.087 41.561A 2.05 2.05 0 0 1 39.138 43.561A 2.06 2.06 0 1 1 37.087 41.561"/>
  </g>
</svg>

​

更新

转换整个AWS文件的结果如下：https://svgshare.com/i/hfn.svg。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72354663

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档