前端之家

  1. 首页
  2. 问答

visio生成的SVG的形状数据

• 问答

我正在尝试从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)"/>
				<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,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)"/>
            <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"/>
gjshiwoxia 回答：visio生成的SVG的形状数据
Visio生产的

<svg>东西使用命名空间。 jQuery不适用于这种情况。我建议使用其他一些库（例如，检查d3），或者考虑名称空间（如果您使用纯Javascript / DOM，即使用getElementsByTagName(..)而不是getElementsByTagNameNS(..)。例如，在d3中，您可以使用$("g")代替jQuery d3.selectAll("g")。

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

,

这是使用每个<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","v:val":"VT4(Use Drawing Page's Units)"
    }
  }
]
jquerysvgvisio
本文链接：https://www.f2er.com/2975746.html

大家都在问