将固定文本插入svg路径

时间:2017-03-13 07:26:05

标签: svg



<svg version="1.1" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	
	<path fill="#009688" stroke="#fff" id="AR" d="M34.5,204.7 L37.7,201.6 L37.7,197.6 L40.7,195.5 L45.3,194.6 L54.1,197.7 L56.9,197.6 L59.2,199.9 L64.4,195.5 L67.0,195.5 L69.5,191.5 L70.2,186.8 L72.4,183.2 L78.8,181.7 L76.7,175.1 L80.6,168.0 L82.9,160.7 L88.8,160.1 L91.1,156.8 L96.0,158.6 L120.4,158.9 L131.3,164.3 L137.7,165.0 L143.2,168.3 L147.3,177.9 L155.0,183.5 L160.3,185.9 L162.1,189.9 L176.4,193.0 L183.0,193.4 L186.3,197.3 L181.3,200.6 L177.3,207.6 L174.3,209.7 L167.1,208.4 L164.7,209.0 L161.8,212.6 L161.1,219.2 L159.2,223.6 L159.8,228.6 L158.3,232.0 L154.6,236.3 L152.0,239.1 L144.9,241.8 L137.8,240.0 L132.7,234.7 L128.5,233.8 L125.3,231.1 L122.0,231.3 L120.0,235.7 L115.2,234.8 L114.8,238.4 L108.9,233.4 L103.7,238.2 L101.2,235.1 L101.7,233.0 L98.0,228.2 L94.4,227.6 L91.5,223.0 L87.0,223.0 L85.7,226.1 L81.9,229.1 L79.2,227.4 L74.2,229.0 L70.1,226.1 L69.5,223.3 L66.4,224.1 L65.2,227.5 L61.9,226.9 L61.2,223.6 L49.3,219.9 L45.4,213.3 Z">
	</path>	
	
	<path fill="#009688" stroke="#fff" id="CS" d="M122.0,378.2 L120.1,372.2 L109.2,366.5 L101.6,368.3 L94.1,366.7 L91.5,363.7 L90.1,358.1 L87.4,356.2 L76.4,355.2 L71.5,349.8 L73.7,346.5 L85.3,345.6 L86.8,342.7 L85.3,339.9 L77.3,336.8 L75.7,333.6 L73.4,333.1 L74.4,330.4 L78.9,329.1 L80.9,322.7 L84.9,320.2 L84.5,316.6 L88.3,312.3 L88.6,306.4 L90.6,303.4 L90.0,298.8 L85.7,293.9 L85.1,291.3 L86.7,285.2 L92.1,281.6 L95.3,275.2 L101.2,274.0 L111.5,278.4 L117.8,275.6 L119.6,275.9 L122.2,280.8 L127.5,281.4 L128.6,275.3 L134.5,274.8 L138.4,272.1 L145.6,274.4 L148.4,269.9 L151.2,268.1 L159.5,267.0 L162.0,272.6 L166.0,274.4 L166.2,277.3 L168.7,277.7 L174.2,283.0 L175.9,286.0 L176.9,294.5 L175.0,298.6 L177.0,304.2 L173.7,312.7 L166.1,319.7 L165.4,323.0 L170.5,324.5 L170.8,328.3 L164.8,335.2 L161.8,344.6 L158.4,349.7 L153.9,361.6 L149.7,363.1 L147.4,360.4 L144.1,360.2 L140.6,356.8 L137.6,356.8 L136.0,361.5 L132.6,367.6 L132.3,377.5 L130.8,378.6 Z">
	</path>	
	
	<path fill="#009688" stroke="#fff" id="TM" d="M159.5,267.0 L151.2,268.1 L148.4,269.9 L145.6,274.4 L138.4,272.1 L134.5,274.8 L128.6,275.3 L127.5,281.4 L122.2,280.8 L119.6,275.9 L117.8,275.6 L111.5,278.4 L101.2,274.0 L95.3,275.2 L92.1,281.6 L86.7,285.2 L85.1,291.3 L85.7,293.9 L90.0,298.8 L90.6,303.4 L88.6,306.4 L88.3,312.3 L84.5,316.6 L78.9,311.2 L71.1,308.1 L68.0,307.8 L64.3,305.2 L59.8,298.8 L56.1,300.2 L48.2,294.8 L40.1,285.0 L36.9,280.1 L33.0,276.5 L36.3,272.8 L33.5,264.6 L35.9,257.8 L37.0,249.2 L35.6,247.6 L31.5,250.9 L27.6,245.9 L26.2,239.8 L22.4,233.7 L15.9,230.5 L6.0,221.1 L4.1,214.5 L0.0,208.3 L3.3,204.8 L15.2,205.5 L17.2,202.7 L23.0,205.1 L27.0,208.3 L32.8,207.1 L34.5,204.7 L45.4,213.3 L49.3,219.9 L61.2,223.6 L61.9,226.9 L65.2,227.5 L66.4,224.1 L69.5,223.3 L70.1,226.1 L74.2,229.0 L79.2,227.4 L81.9,229.1 L85.7,226.1 L87.0,223.0 L91.5,223.0 L94.4,227.6 L98.0,228.2 L101.7,233.0 L101.2,235.1 L103.7,238.2 L108.9,233.4 L114.8,238.4 L115.2,234.8 L120.0,235.7 L122.0,231.3 L125.3,231.1 L128.5,233.8 L132.7,234.7 L137.8,240.0 L144.9,241.8 L152.0,239.1 L154.6,236.3 L157.0,239.1 L158.3,245.7 L160.9,248.6 L164.4,255.5 L167.2,257.0 L162.5,261.2 Z">
	</path>
	
	<text font-family="Verdana" font-size="30" fill="#fff">
	 <textPath xlink:href="#AR">
		AR
	 </textPath>
	</text>		

  <text font-family="Verdana" font-size="30" fill="#fff">
    <textPath xlink:href="#CS">
      CS
    </textPath>
  </text>	
  
  <text font-family="Verdana" font-size="30" fill="#fff">
    <textPath xlink:href="#TM">
      TM
    </textPath>
  </text>	
</svg>
&#13;
&#13;
&#13;

如何插入水平固定文本(如果可能,居中于路径)?

我使用了类似的内容,但是文本被旋转并且不在路径中(参见代码段)

  <text font-family="Verdana" font-size="30" fill="#fff">
    <textPath xlink:href="#TM">
      TM
    </textPath>
  </text>

这是预期的:

that was expected:

0 个答案:

没有答案