svg元素无法在html页面上呈现 - 角度5

时间：2018-03-08 02:48:40

标签： html5 angular svg

我正在尝试在角度为5的html上渲染一个svg元素，我的误差低于此值。

enter image description here

这是我的svg元素。 我通过从ms visio 2016工具

将vsdx图保存到svg来获得此svg元素代码

＆＃13;
＆＃13; 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by Microsoft Visio, SVG Export testicon.svg Page-1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
		xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="0.905093in" height="2.11139in"
		viewBox="0 0 65.1667 152.02" xml:space="preserve" color-interpolation-filters="sRGB" class="st4">
	<v:documentProperties v:langID="1033" v:viewMarkup="false"/>

	<style type="text/css">

		.st1 {fill:#d9f442;stroke:#000000;stroke-linecap:butt;stroke-width:1.25}
		.st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.2376}
		.st3 {fill:#000000;font-family:Calibri;font-size:0.666664em}
		.st4 {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">
		<v:userDefs>
			<v:ud v:nameU="PEHideTags"/>
		</v:userDefs>
		<title>Page-1</title>
		<v:pageProperties v:drawingScale="1" v:pageScale="1" v:drawingUnits="19" v:shadowOffsetX="9" v:shadowOffsetY="-9"/>
		<v:layer v:name="Equipment" v:index="0"/>
		<g id="group5-1" transform="translate(1.25,-25.4369)" v:mID="5" v:groupContext="group" v:layerMember="0">
			<v:custProps>
				<v:cp v:nameU="Description" v:lbl="Description" v:type="0" v:sortKey="0" v:langID="1033"/>
				<v:cp v:nameU="Material" v:lbl="Material" v:type="0" v:sortKey="1" v:langID="1033"/>
				<v:cp v:nameU="Manufacturer" v:lbl="Manufacturer" v:type="0" v:sortKey="2" v:langID="1033"/>
				<v:cp v:nameU="Model" v:lbl="Model" v:type="0" v:sortKey="3" v:langID="1033"/>
			</v:custProps>
			<v:userDefs>
				<v:ud v:nameU="TextCH" v:prompt="Determines text control handle visibility." v:val="VT0(5):26"/>
				<v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
				<v:ud v:nameU="SOLSH" v:val="VT4({D7D7DB7E-3668-43e5-AF97-97F58AB229A5})"/>
				<v:ud v:nameU="ShapeClass" v:val="VT4(Equipment)"/>
				<v:ud v:nameU="PEComponentTag" v:val="VT4(E-0)"/>
				<v:ud v:nameU="PETagNumber"/>
				<v:ud v:nameU="PETagFormat" v:prompt="E-0" v:val="VT4(Equipment)"/>
				<v:ud v:nameU="PEHideTag"/>
				<v:ud v:nameU="PEPageHideTags" v:val="VT0(0):26"/>
				<v:ud v:nameU="PELayout" v:val="VT0(31):26"/>
				<v:ud v:nameU="CPMSetList" v:prompt="Description,Material,Manufacturer,Model" v:val="VT4(Equipment)"/>
				<v:ud v:nameU="TextCH" v:prompt="" v:val="VT0(0):26"/>
				<v:ud v:nameU="PEComponentTag" v:prompt="" v:val="VT4(E-13)"/>
				<v:ud v:nameU="PETagNumber" v:prompt="" v:val="VT0(13):26"/>
				<v:ud v:nameU="PETagFormat" v:prompt="E-13" v:val="VT0(0):26"/>
			</v:userDefs>
			<title>Tray column.18</title>
			<desc>NGL</desc>
			<g id="shape6-2" v:mID="6" v:groupContext="shape" v:layerMember="0">
				<title>Sheet.6</title>
				<path d="M-0 136.35 A31.8476 19.0818 -180 0 0 62.67 136.35 L62.67 42.35 A31.8476 19.0818 -180 0 0 0 42.35 L0 136.35
							 Z" class="st1"/>
			</g>
			<g id="shape7-4" v:mID="7" v:groupContext="shape" v:layerMember="0" transform="translate(0,-94)">
				<title>Sheet.7</title>
				<v:userDefs>
					<v:ud v:nameU="visKeywords"
							v:val="VT4(Tray,dashed,symbol,column,Equipment,Vessels,process,plant,design,mechanical,drawings,autoclaves)"/>
					<v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
				</v:userDefs>
				<path d="M0 152.02 L62.67 152.02" class="st2"/>
			</g>
			<g id="shape8-7" v:mID="8" v:groupContext="shape" v:layerMember="0" transform="translate(0,-31.3333)">
				<title>Sheet.8</title>
				<v:userDefs>
					<v:ud v:nameU="visKeywords"
							v:val="VT4(Tray,dashed,symbol,column,Equipment,Vessels,process,plant,design,mechanical,drawings,autoclaves)"/>
					<v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
				</v:userDefs>
				<path d="M0 152.02 L62.67 152.02" class="st2"/>
			</g>
			<g id="shape9-10" v:mID="9" v:groupContext="shape" v:layerMember="0" transform="translate(0,-78.3333)">
				<title>Sheet.9</title>
				<v:userDefs>
					<v:ud v:nameU="visKeywords"
							v:val="VT4(Tray,dashed,symbol,column,Equipment,Vessels,process,plant,design,mechanical,drawings,autoclaves)"/>
					<v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
				</v:userDefs>
				<path d="M0 152.02 L62.67 152.02" class="st2"/>
			</g>
			<g id="shape10-13" v:mID="10" v:groupContext="shape" v:layerMember="0" transform="translate(0,-47)">
				<title>Sheet.10</title>
				<v:userDefs>
					<v:ud v:nameU="visKeywords"
							v:val="VT4(Tray,dashed,symbol,column,Equipment,Vessels,process,plant,design,mechanical,drawings,autoclaves)"/>
					<v:ud v:nameU="visVersion" v:val="VT0(15):26"/>
				</v:userDefs>
				<path d="M0 152.02 L62.67 152.02" class="st2"/>
			</g>
			<g id="shape5-16" v:mID="5" v:groupContext="groupContent" v:layerMember="0">
				<v:textBlock v:margins="rect(4,4,4,4)"/>
				<v:textRect cx="31.3333" cy="168.655" width="64" height="17.6036"/>
				<text x="24.55" y="171.06" class="st3" v:langID="1033"><v:paragraph v:horizAlign="1"/><v:tabList/></text>			</g>
		</g>
	</g>
</svg>
＆＃13;
＆＃13;
＆＃13;

如果我将上面的svg元素粘贴到普通的html文件中，我可以渲染 图像，但我无法在角度组件html页面中呈现。

任何人都可以告诉我如何在角度组件html页面中渲染这个svg元素。

1 个答案:

答案 0 :(得分：0)

该SVG中的自定义Visio元素（<v:* ... >）元素令Angular感到困惑。

如果SVG仅用作静态文件，则删除Visio元素。您可以手动执行此操作，也可以通过svgo等工具运行它。

相关问题
最新问题