inline svg,如果使用switch,则不显示foreignobject的hml内容

时间:2017-09-03 13:52:28

标签: css svg

Switch语句不显示文本。 如果我使用没有开关的foreignobject - 它正在工作。 如果我尝试创建一个回退到foreignobject,svg显示正确的高度和宽度,但没有文本。

<svg class="txtOnImgSvg sport" viewBox="0 0 700 100" >
    <foreignobject class="txtOnImgSvgFO sport" x="20" y="20"  >
        <div class="txtOnImgSvgFOdiv sport" >Sport : <br>50m simming pool on site, <br>Tennis court, <br>Fishing <br>Cycling <br>Diving.</div>         
    </foreignobject>
</svg>

<svg class="txtOnImgSvg sport" viewBox="0 0 700 100" >
     <switch>

         <foreignobject class="txtOnImgSvgFO sport" x="20" y="20"  >
              <div class="txtOnImgSvgFOdiv sport" >Sport : <br>50m simming pool on site, <br>Tennis court, <br>Fishing <br>Cycling <br>Diving.</div>         
         </foreignobject>

         <text class="txtOnImgSvgTxt sport" x="20" y="20"  >
             <tspan x="20" y="20" class="navDescr" >Sport:</tspan>
             <tspan x="20" y="100" class="navDescr" >50m simming pool</tspan>
             <tspan x="20" y="100" class="navDescr" >tennis court</tspan>
             <tspan x="20" y="180" class="navDescr" >fishing</tspan>
             <tspan x="20" y="180" class="navDescr" >cycling</tspan>
             <tspan x="20" y="180" class="navDescr" >diving</tspan>
         </text>  

    </switch> 
</svg>

0 个答案:

没有答案