Question

我有一个最初在Visio中创建的SVG文件。这是一个电气图。我想将此图中的一个元素替换为另一个我目前在单独文件中的元素。这是原始文件，只显示一个符号：

这是它的代码：

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!-- Generated by Microsoft Visio 11.0, SVG Export, v1.0 SAMPLE.svg Page-1 -->

  <svg
     xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="8.5in"
     height="11in"
     viewBox="0 0 612 792"
     xml:space="preserve"
     color-interpolation-filters="sRGB"
     class="st6"
     version="1.1"
     id="svg678"
     sodipodi:docname="SAMPLE1.svg"
     inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
     id="metadata684"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
     id="defs682" /><sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1022"
     id="namedview680"
     showgrid="false"
     inkscape:zoom="2"
     inkscape:cx="408"
     inkscape:cy="795.24519"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="g676" />
      <v:documentProperties
     v:langID="1033"
     v:viewMarkup="false">
          <v:userDefs>
              <v:ud
     v:nameU="msvNoAutoConnect"
     v:val="VT0(1):26" />
          </v:userDefs>
      </v:documentProperties>

      <style
     type="text/css"
     id="style348">
      <![CDATA[
          .st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
          .st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
          .st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
          .st4 {fill:#000000;font-family:Calibri;font-size:0.499992em}
          .st5 {fill:#ffffff}
          .st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
      ]]>
      </style>

      <g
     v:mID="0"
     v:index="1"
     v:groupContext="foregroundPage"
     id="g676">
          <title
     id="title350">Page-1</title>
          <v:pageProperties
     v:drawingScale="1"
     v:pageScale="1"
     v:drawingUnits="0"
     v:shadowOffsetX="9"
     v:shadowOffsetY="-9" />
          <v:layer
     v:name="Connector"
     v:index="0" />
          <v:layer
     v:name="Electrical"
     v:index="1" />




          <g
     id="group7-18"
     transform="translate(84.24,-648.054)"
     v:mID="7"
     v:groupContext="group"
     v:layerMember="1">
              <v:custProps>
                  <v:cp
     v:nameU="SubType"
     v:lbl="Switch type"
     v:type="1"
     v:format="Mushroom Head;Push-Pull Head;Normal"
     v:langID="1033"
     v:val="VT4(Normal)" />
              </v:custProps>
              <v:userDefs>
                  <v:ud
     v:nameU="visDescription"
     v:val="VT4(Circuit closing (make).  Right-click for mushroom head, push-pull head.)" />
                  <v:ud
     v:nameU="visVersion"
     v:val="VT0(14):26" />
              </v:userDefs>
              <title
     id="title385">Pushbutton make</title>
              <desc
     id="desc387">START</desc>
              <g
     id="shape8-19"
     v:mID="8"
     v:groupContext="shape"
     v:layerMember="1"
     transform="translate(11.97,-17.5061)">
                  <title
     id="title389">Sheet.8</title>
              </g>
              <g
     id="shape9-21"
     v:mID="9"
     v:groupContext="shape"
     v:layerMember="1"
     transform="translate(0,1.34663)">
                  <title
     id="title392">Sheet.9</title>
                  <path
     d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65 ZM8.98 790.65 A1.49625         1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65 Z"
     class="st5"
     id="path394" />
                  <path
     d="M10.47 786.61 L25.44 786.61"
     class="st2"
     id="path396" />
                  <path
     d="M17.96 769.11 L17.96 786.61"
     class="st2"
     id="path398" />
                  <path
     d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65"
     class="st2"
     id="path400" />
                  <path
     d="M8.98 790.65 A1.49625 1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65"
     class="st2"
     id="path402" />
                  <path
     d="M35.91 790.65 L26.93 790.65"
     class="st2"
     id="path404" />
                  <path
     d="M0 790.65 L8.98 790.65"
     class="st2"
     id="path406" />
              </g>
              <g
     id="shape7-29"
     v:mID="7"
     v:groupContext="groupContent"
     v:layerMember="1">
                  <v:textBlock
     v:margins="rect(1,1,1,1)"
     v:verticalAlign="0" />
                  <v:textRect
     cx="17.955"
     cy="796.602"
     width="18.7"
     height="9.20349" />
                  <text
     x="10.29"
     y="798.4"
     class="st4"
     v:langID="1033"
     id="text409"><v:paragraph
     v:horizAlign="1" /><v:tabList />START</text>
              </g>
          </g>
      </g>
  </svg>

这是另一个替换为：

这是它的代码：

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <!-- Created with Inkscape (http://www.inkscape.org/) -->

  <svg
     xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     width="210mm"
     height="297mm"
     viewBox="0 0 210 297"
     version="1.1"
     id="svg8"
     inkscape:version="0.92.3 (2405546, 2018-03-11)"
     sodipodi:docname="PushButtonBreak.svg">
    <defs
       id="defs2" />
    <sodipodi:namedview
       id="base"
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1.0"
       inkscape:pageopacity="0.0"
       inkscape:pageshadow="2"
       inkscape:zoom="2"
       inkscape:cx="400"
       inkscape:cy="560"
       inkscape:document-units="mm"
       inkscape:current-layer="layer1"
       showgrid="false"
       inkscape:window-width="1920"
       inkscape:window-height="1022"
       inkscape:window-x="-8"
       inkscape:window-y="-8"
       inkscape:window-maximized="1" />
    <metadata
       id="metadata5">
      <rdf:RDF>
        <cc:Work
           rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g
       inkscape:label="Layer 1"
       inkscape:groupmode="layer"
       id="layer1">
      <g
         id="group11-31"
         transform="matrix(0.35277777,0,0,0.35277777,100.54167,-119.40724)"
         v:mID="11"
         v:groupContext="group"
         v:layerMember="1">
        <v:custProps>
          <v:cp
             v:nameU="SubType"
             v:lbl="Switch type"
             v:type="1"
             v:format="Mushroom Head;Push-Pull Head;Normal"
             v:langID="1033"
             v:val="VT4(Normal)" />
        </v:custProps>
        <v:userDefs>
          <v:ud
             v:nameU="visDescription"
             v:val="VT4(Circuit opening (break).  Right-click for mushroom head, push-pull head.)" />
          <v:ud
             v:nameU="visVersion"
             v:val="VT0(14):26" />
        </v:userDefs>
        <title
           id="title413">Pushbutton break</title>
        <desc
           id="desc415">STOP</desc>
        <g
           id="shape12-32"
           v:mID="12"
           v:groupContext="shape"
           v:layerMember="1"
           transform="translate(12,-17.55)">
          <title
             id="title417">Sheet.12</title>
        </g>
        <g
           id="shape13-34"
           v:mID="13"
           v:groupContext="shape"
           v:layerMember="1"
           transform="translate(0,1.35)">
          <title
             id="title420">Sheet.13</title>
          <path
             d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z m -15,0 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z"
             class="st5"
             id="path422"
             inkscape:connector-curvature="0"
             style="fill:#ffffff" />
          <path
             d="M 0,790.65 H 9"
             class="st2"
             id="path424"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
          <path
             d="M 36,790.65 H 27"
             class="st2"
             id="path426"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
          <path
             d="m 10.5,792 h 15"
             class="st2"
             id="path428"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
          <path
             d="M 18,769.05 V 792"
             class="st2"
             id="path430"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
          <path
             d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
             class="st2"
             id="path432"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
          <path
             d="m 9,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
             class="st2"
             id="path434"
             inkscape:connector-curvature="0"
             style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
        </g>
        <g
           id="shape11-42"
           v:mID="11"
           v:groupContext="groupContent"
           v:layerMember="1">
          <v:textBlock
             v:margins="rect(1,1,1,1)"
             v:verticalAlign="0" />
          <v:textRect
             cx="18"
             cy="796.602"
             width="16.12"
             height="9.20349" />
          <text
             x="11.62"
             y="798.40002"
             class="st4"
             v:langID="1033"
             id="text437"
             style="font-size:5.99990416px;font-family:Calibri;fill:#000000"><v:paragraph
     v:horizAlign="1" />
  <v:tabList />
  STOP</text>
        </g>
      </g>
    </g>
  </svg>

我想知道交换元素的适当策略是什么。这可以在纯javascript / jQuery中完成，还是需要额外的库？

感谢您的帮助。

Answer 1

匹配维度是SVG拥有大量设施的过程。不幸的是，你的文件没有正确使用它们，因此复制和粘贴时可能会出现很多问题：文本定位错误，文本大小错误，行宽错误，高度/宽度失真。

重新设计整个事物确实没有可维护的方法。你很幸运我有时间。这就是我要做的。它使用SVG <symbol>元素来定义可重用模板。虽然我不知道Visio是否可以使用它们，但我已经尝试保持其标记。

要获得最终结果，请将属性xmlns:xlink="http://www.w3.org/1999/xlink"添加到完整的图表文件中。然后将<style>，<symbol>元素复制为其直接子项。如果您的文件中已有<style>，请注意他们会互动。注意类的名称，您可能需要重命名其中一些以避免冲突。

查看标记

<title>Pushbutton make</title>

元素，并将{strong>父 <g>元素替换为<use>元素，并且首次尝试将transform属性替换为<g>的一部分。这绝不保证符号现在位于正确的位置，但现在您可以通过更改<use>属性来移动transform元素，直到它适合。（您也可以使用Inkscape作为UI。）

要交换呈现的符号，您现在只需更改xlink:href属性即可引用 make 或 break 状态。该脚本给出了一个如何做到这一点的例子。

＆＃13;

var state = true;
setInterval(function () {
    state = !state;
    var id = "#Pushbutton." + (state ? 'make' : 'break');
    document.querySelector('#button1').setAttribute('xlink:href', id);
}, 2000);

＆＃13;

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="st6">
  <v:documentProperties v:viewMarkup="false" v:langID="1033">
    <v:userDefs>
      <v:ud v:val="VT0(1):26" v:nameU="msvNoAutoConnect" />
    </v:userDefs>
  </v:documentProperties>
  <style>
      <![CDATA[
          .st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
          .st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
          .st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
          .st4 {fill:#000000;font-family:Calibri;font-size:0.5em;text-anchor:middle}
          .st5 {fill:#ffffff}
          .st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
          .st7 {fill:#000000;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
      ]]>
  </style>
  <symbol id="Pushbutton.make" viewBox="0 0 36 30">
    <v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
    <v:ud v:val="VT4(Circuit closing (make).  Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
    <v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
    <title>Pushbutton make</title>
    <desc>START</desc>
    <g>
      <title>Sheet.8</title>
    </g>
    <g>
      <title>Sheet.9</title>
      <path class="st2" d="M 10.5,17.5 H 25.5" />
      <path class="st2" d="M 18,0 V 17.5" />
      <path class="st3" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
      <path class="st3" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
      <path class="st2" d="M 36,21.5 H 27" />
      <path class="st2" d="M 0,21.5 H 9" />
    </g>
    <g>
      <v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
      <v:textRect height="9.2" width="18.7" cy="26.1" cx="18" />
      <text class="st4" y="28" x="18">
      <v:paragraph v:horizAlign="0" />
      <v:tabList />START</text>
    </g>
  </symbol>
  <symbol id="Pushbutton.break" viewBox="0 0 36 30">
    <v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
    <v:ud v:val="VT4(Circuit closing (make).  Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
    <v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
    <title>Pushbutton break</title>
    <desc>STOP</desc>
    <g>
      <title>Sheet.8</title>
    </g>
    <g>
      <title>Sheet.9</title>
      <path class="st2" d="M 10.5,23 H 25.5" />
      <path class="st2" d="M 18,0 V 23" />
      <path class="st7" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
      <path class="st7" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
      <path class="st2" d="M 36,21.5 H 27" />
      <path class="st2" d="M 0,21.5 H 9" />
    </g>
    <g>
      <v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
      <v:textRect height="9.2" width="17.2" cy="26.1" cx="18" />
      <text class="st4" y="28" x="18">
      <v:paragraph v:horizAlign="0" />
      <v:tabList />STOP</text>
    </g>
  </symbol>
  <g>
    <title>Page-1</title>
    <v:pageProperties v:shadowOffsetY="-9" v:shadowOffsetX="9" v:drawingUnits="0" v:pageScale="1" v:drawingScale="1" />
    <v:layer v:index="0" v:name="Connector" />
    <v:layer v:index="1" v:name="Electrical" />
    <use id="button1" xlink:href="#Pushbutton.break" width="36" height="30" transform="translate(50 50) scale (3)" />
  </g>
</svg>

＆＃13;

替换SVG的部分

1 个答案: