来自 visio 生成的 SVG 的形状数据

Question

我正在尝试从 Visio 中创建的 SVG 文件中提取自定义属性。我试过 jQuery，如果我使用 "g" 作为选择器，我会得到节点列表，但我试图找到 v:name 和v.val.

任何人都可以提出一个好的方法来做到这一点。谢谢您的帮助。

<g id="shape407-1000" v:mID="407" v:groupContext="shape" v:layerMember="0" transform="translate(-7.2,-10.2789)">
    <title>Horizontal.411</title>
    <desc>A</desc>
    <v:custProps>
     <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false"
       v:langID="1033" v:val="VT4(0.00)"/>
     <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1"
       v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers"
       v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
     <v:cp v:nameU="ShowUnits" v:lbl="Units Display" v:type="1" v:format="Don&#39;t Show Units;Show Units"
       v:invis="false" v:langID="1033" v:val="VT4(Don&#39;t Show Units)"/>
     <v:cp v:nameU="Extensions" v:lbl="Extension Lines" v:type="1" v:format="Both;End only;Begin only;Neither"
       v:invis="true" v:langID="1033" v:val="VT4(Both)"/>
     <v:cp v:nameU="Angle" v:type="2" v:invis="false" v:langID="1033" v:val="VT0(0):37"/>
     <v:cp v:nameU="Width" v:lbl="Input" v:prompt="Enter Width" v:type="0" v:langID="1033" v:val="VT4(In)"/>
     <v:cp v:nameU="Class" v:lbl="Units_" v:type="0" v:langID="1033" v:val="VT4(In)"/>
    </v:custProps>
    <v:userDefs>
     <v:ud v:nameU="AntiScale" v:val="VT0(1):26"/>
     <v:ud v:nameU="LUnitsFactor" v:val="VT0(0):19"/>
     <v:ud v:nameU="FormatString" v:val="VT4(0.00)"/>
     <v:ud v:nameU="LengthText" v:val="VT4(1.00)"/>
     <v:ud v:nameU="Length" v:val="VT0(1):19"/>
     <v:ud v:nameU="LPFString" v:prompt="Linear Precision Formatting String" v:val="VT4(0.00)"/>
     <v:ud v:nameU="LPrec" v:val="VT0(2):26"/>
     <v:ud v:nameU="LPrecInd" v:val="VT0(2):26"/>
     <v:ud v:nameU="LPrecVal" v:val="VT4(0.00)"/>
     <v:ud v:nameU="LUnits" v:val="VT0(0):26"/>
     <v:ud v:nameU="LUnitsInd" v:prompt="0=Dwg, 1=Arch, 2=Dec Ft, 3+ = other" v:val="VT0(0):26"/>
     <v:ud v:nameU="LUnitsVal" v:val="VT4(Use Drawing Page&#39;s Units)"/>
     <v:ud v:nameU="ShowUnits" v:val="VT0(0):26"/>
     <v:ud v:nameU="ShowUnitsInd" v:val="VT0(0):26"/>
     <v:ud v:nameU="ShowUnitsVal" v:val="VT4(Don&#39;t Show Units)"/>
     <v:ud v:nameU="FeetInch" v:val="VT0(0):26"/>
     <v:ud v:nameU="Feet" v:val="VT0(0):26"/>
     <v:ud v:nameU="Inch" v:val="VT0(0):26"/>
     <v:ud v:nameU="InchPrec" v:val="VT0(16):26"/>
     <v:ud v:nameU="LocEndX" v:val="VT0(1):1"/>
     <v:ud v:nameU="LocEndY" v:val="VT0(0):1"/>
     <v:ud v:nameU="visObjectType" v:val="VT0(105):26"/>
     <v:ud v:nameU="DrawingUnitFactor" v:val="VT0(0):19"/>
     <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
     <v:ud v:nameU="LUnitsFactor" v:prompt="" v:val="VT0(0):0"/>
     <v:ud v:nameU="LengthText" v:prompt="" v:val="VT4(0.70)"/>
     <v:ud v:nameU="Length" v:prompt="" v:val="VT0(0.7):0"/>
     <v:ud v:nameU="LocEndX" v:prompt="" v:val="VT0(-0.7):1"/>
     <v:ud v:nameU="DrawingUnitFactor" v:prompt="" v:val="VT0(0):0"/>
    </v:userDefs>
    <v:textBlock v:margins="rect(0,0,0,0)"/>
    <v:textRect cx="25.2" cy="496.058" width="4.84" height="7.20349"/>
    <path d="M50.4 490.06 L50.4 517.74 L50.4 490.06 ZM0 490.06 L0 517.74 L0 490.06 Z" class="st20"/>
    <path d="M50.4 490.06 L50.4 517.74 L50.4 490.06" class="st21"/>
    <path d="M0 490.06 L0 517.74 L0 490.06" class="st21"/>
    <path d="M25.2 496.06 L6.12 496.06" class="st22"/>
    <path d="M25.2 496.06 L44.28 496.06" class="st22"/>
    <rect v:rectContext="textBkgnd" x="23.4641" y="492.458" width="3.47168" height="7.20016" class="st24"/>
    <text x="23.46" y="497.86" class="st25" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>A</text>   </g>
   <g id="shape408-1013" v:mID="408" v:groupContext="shape" v:layerMember="0"
     transform="translate(-376.737,435.022) rotate(-90)">
    <title>Vertical</title>
    <desc>B</desc>
    <v:custProps>
     <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false"
       v:langID="1033" v:val="VT4(0.00)"/>
     <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1"
       v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers"
       v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
     <v:cp v:nameU="ShowUnits" v:lbl="Units Display" v:type="1" v:format="Don&#39;t Show Units;Show Units"
       v:invis="false" v:langID="1033" v:val="VT4(Don&#39;t Show Units)"/>
     <v:cp v:nameU="Extensions" v:lbl="Extension Lines" v:type="1" v:format="Both;End only;Begin only;Neither"
       v:invis="true" v:langID="1033" v:val="VT4(Both)"/>
     <v:cp v:nameU="Angle" v:type="2" v:invis="false" v:langID="1033" v:val="VT0(1.5707963267949):37"/>
     <v:cp v:nameU="Angle" v:lbl="" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="false" v:ask="false"
       v:langID="0" v:cal="0" v:val="VT0(1.5707963267949):32"/>
     <v:cp v:nameU="Hight" v:lbl="Input" v:prompt="Enter Height" v:type="0" v:langID="1033" v:val="VT4(ft)"/>
     <v:cp v:nameU="Class" v:lbl="Units_" v:type="0" v:langID="1033" v:val="VT4(ft)"/>
    </v:custProps>

<g id="shape407-1000" v:mID="407" v:groupContext="shape" v:layerMember="0" transform="translate(-7.2,-10.2789)">
            <title>Horizontal.411</title>
            <desc>A</desc>
            <v:custProps>
                <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false"
                        v:langID="1033" v:val="VT4(0.00)"/>
                <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1"
                        v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers"
                        v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
                <v:cp v:nameU="ShowUnits" v:lbl="Units Display" v:type="1" v:format="Don&#39;t Show Units;Show Units"
                        v:invis="false" v:langID="1033" v:val="VT4(Don&#39;t Show Units)"/>
                <v:cp v:nameU="Extensions" v:lbl="Extension Lines" v:type="1" v:format="Both;End only;Begin only;Neither"
                        v:invis="true" v:langID="1033" v:val="VT4(Both)"/>
                <v:cp v:nameU="Angle" v:type="2" v:invis="false" v:langID="1033" v:val="VT0(0):37"/>
                <v:cp v:nameU="Width" v:lbl="Input" v:prompt="Enter Width" v:type="0" v:langID="1033" v:val="VT4(In)"/>
                <v:cp v:nameU="Class" v:lbl="Units_" v:type="0" v:langID="1033" v:val="VT4(In)"/>
            </v:custProps>
            <v:userDefs>
                <v:ud v:nameU="AntiScale" v:val="VT0(1):26"/>
                <v:ud v:nameU="LUnitsFactor" v:val="VT0(0):19"/>
                <v:ud v:nameU="FormatString" v:val="VT4(0.00)"/>
                <v:ud v:nameU="LengthText" v:val="VT4(1.00)"/>
                <v:ud v:nameU="Length" v:val="VT0(1):19"/>
                <v:ud v:nameU="LPFString" v:prompt="Linear Precision Formatting String" v:val="VT4(0.00)"/>
                <v:ud v:nameU="LPrec" v:val="VT0(2):26"/>
                <v:ud v:nameU="LPrecInd" v:val="VT0(2):26"/>
                <v:ud v:nameU="LPrecVal" v:val="VT4(0.00)"/>
                <v:ud v:nameU="LUnits" v:val="VT0(0):26"/>
                <v:ud v:nameU="LUnitsInd" v:prompt="0=Dwg, 1=Arch, 2=Dec Ft, 3+ = other" v:val="VT0(0):26"/>
                <v:ud v:nameU="LUnitsVal" v:val="VT4(Use Drawing Page&#39;s Units)"/>
                <v:ud v:nameU="ShowUnits" v:val="VT0(0):26"/>
                <v:ud v:nameU="ShowUnitsInd" v:val="VT0(0):26"/>
                <v:ud v:nameU="ShowUnitsVal" v:val="VT4(Don&#39;t Show Units)"/>
                <v:ud v:nameU="FeetInch" v:val="VT0(0):26"/>
                <v:ud v:nameU="Feet" v:val="VT0(0):26"/>
                <v:ud v:nameU="Inch" v:val="VT0(0):26"/>
                <v:ud v:nameU="InchPrec" v:val="VT0(16):26"/>
                <v:ud v:nameU="LocEndX" v:val="VT0(1):1"/>
                <v:ud v:nameU="LocEndY" v:val="VT0(0):1"/>
                <v:ud v:nameU="visObjectType" v:val="VT0(105):26"/>
                <v:ud v:nameU="DrawingUnitFactor" v:val="VT0(0):19"/>
                <v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
                <v:ud v:nameU="LUnitsFactor" v:prompt="" v:val="VT0(0):0"/>
                <v:ud v:nameU="LengthText" v:prompt="" v:val="VT4(0.70)"/>
                <v:ud v:nameU="Length" v:prompt="" v:val="VT0(0.7):0"/>
                <v:ud v:nameU="LocEndX" v:prompt="" v:val="VT0(-0.7):1"/>
                <v:ud v:nameU="DrawingUnitFactor" v:prompt="" v:val="VT0(0):0"/>
            </v:userDefs>
            <v:textBlock v:margins="rect(0,0,0,0)"/>
            <v:textRect cx="25.2" cy="496.058" width="4.84" height="7.20349"/>
            <path d="M50.4 490.06 L50.4 517.74 L50.4 490.06 ZM0 490.06 L0 517.74 L0 490.06 Z" class="st20"/>
            <path d="M50.4 490.06 L50.4 517.74 L50.4 490.06" class="st21"/>
            <path d="M0 490.06 L0 517.74 L0 490.06" class="st21"/>
            <path d="M25.2 496.06 L6.12 496.06" class="st22"/>
            <path d="M25.2 496.06 L44.28 496.06" class="st22"/>
            <rect v:rectContext="textBkgnd" x="23.4641" y="492.458" width="3.47168" height="7.20016" class="st24"/>
            <text x="23.46" y="497.86" class="st25" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/>A</text>         </g>
        <g id="shape408-1013" v:mID="408" v:groupContext="shape" v:layerMember="0"
                transform="translate(-376.737,435.022) rotate(-90)">
            <title>Vertical</title>
            <desc>B</desc>
            <v:custProps>
                <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false"
                        v:langID="1033" v:val="VT4(0.00)"/>
                <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1"
                        v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers"
                        v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
                <v:cp v:nameU="ShowUnits" v:lbl="Units Display" v:type="1" v:format="Don&#39;t Show Units;Show Units"
                        v:invis="false" v:langID="1033" v:val="VT4(Don&#39;t Show Units)"/>
                <v:cp v:nameU="Extensions" v:lbl="Extension Lines" v:type="1" v:format="Both;End only;Begin only;Neither"
                        v:invis="true" v:langID="1033" v:val="VT4(Both)"/>
                <v:cp v:nameU="Angle" v:type="2" v:invis="false" v:langID="1033" v:val="VT0(1.5707963267949):37"/>
                <v:cp v:nameU="Angle" v:lbl="" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="false" v:ask="false"
                        v:langID="0" v:cal="0" v:val="VT0(1.5707963267949):32"/>
                <v:cp v:nameU="Hight" v:lbl="Input" v:prompt="Enter Height" v:type="0" v:langID="1033" v:val="VT4(ft)"/>
                <v:cp v:nameU="Class" v:lbl="Units_" v:type="0" v:langID="1033" v:val="VT4(ft)"/>
            </v:custProps>
            <v:userDefs>
                <v:ud v:nameU="AntiScale" v:val="VT0(1):26"/>
                <v:ud v:nameU="LUnitsFactor" v:val="VT0(0):19"/>

Answer 1

<svg> Visio 生成的内容使用命名空间。 jQuery 不适合这种情况。我建议使用其他一些库（例如检查 d3），或者考虑命名空间（如果您使用纯 javascript/DOM，即使用 getElementsByTagNameNS(..) 而不是 getElementsByTagName(..)。例如，对于 d3，您可以使用 d3.selectAll("g") 而不是 jQuery $("g")，这样就可以了。

另一种选择（免责声明：我是作者）是使用 tool，它将从 Visio 生成对用户更友好的 SVG，开发人员更容易处理（自定义属性只是导出例如作为 Javascript 对象）。

Answer 2

这是为每个 <g> 元素创建一个对象的数组的一种方法。它循环遍历 <g> 元素，然后循环遍历组成它们的 <v:cp> 元素，然后循环遍历这些元素的属性。

$(document).ready(function() {
  
  let groups = [];
  
  $('g').each(function() {
    
    let group = {
      id: $(this).attr('id'),
      attributes: {}
    };
    
    $(this).find('v\:cp').each(function() {
      let attributes = $(this)[0].attributes;
      for (let i = 0; i < attributes.length; i++) {
        group.attributes[attributes[i].nodeName] = attributes[i].nodeValue;
      }
    });
    
    groups.push(group)
    
  });
  
  console.log(groups);
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg>
  <g id="shape407-1000" v:mID="407" v:groupContext="shape" v:layerMember="0" transform="translate(-7.2,-10.2789)">
    <title>Horizontal.411</title>
    <desc>A</desc>
    <v:custProps>
      <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false" v:langID="1033" v:val="VT4(0.00)"/>
      <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1" v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers" v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
    </v:custProps>
  </g>
  <g id="shape408-1013" v:mID="408" v:groupContext="shape" v:layerMember="0" transform="translate(-376.737,435.022) rotate(-90)">
    <title>Vertical</title>
    <desc>B</desc>
    <v:custProps>
      <v:cp v:nameU="LPrec" v:lbl="Precision" v:type="1" v:format="0;0.0;0.00;0.000;0.0000" v:invis="false" v:langID="1033" v:val="VT4(0.00)"/>
      <v:cp v:nameU="LUnits" v:lbl="Units" v:type="1" v:format="Use Drawing Page&#39;s Units;Feet-Inch (1&#39;-0&#34;);Feet (1.00&#39;);Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers" v:invis="false" v:langID="1033" v:val="VT4(Use Drawing Page&#39;s Units)"/>
    </v:custProps>
  </g>
</svg>

生成的对象应如下所示：

[
  {
    "id":"shape407-1000",
    "attributes":{
      "v:nameu":"LUnits",
      "v:lbl":"Units",
      "v:type":"1",
      "v:format":"Use Drawing Page's Units;Feet-Inch (1'-0\");Feet (1.00');Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers",
      "v:invis":"false",
      "v:langid":"1033",
      "v:val":"VT4(Use Drawing Page's Units)"
    }
  },
  {
    "id":"shape408-1013",
    "attributes":{
      "v:nameu":"LUnits",
      "v:lbl":"Units",
      "v:type":"1",
      "v:format":"Use Drawing Page's Units;Feet-Inch (1'-0\");Feet (1.00');Inches;Feet (1.00ft);Miles;Millimeters;Centimeters;Meters;Kilometers",
      "v:invis":"false",
      "v:langid":"1033",
      "v:val":"VT4(Use Drawing Page's Units)"
    }
  }
]

来自 visio 生成的 SVG 的形状数据

Shape data from visio generated SVG

jquery

svg

visio