Question

我使用外部对象使用内联svg，但如果我尝试制作svg文件并插入到文档中，它就不起作用。如何在svg文件中正确使用外来对象？

使用内联svg：

 <svg width="500" height="300" style="border:1px red solid">
    <foreignobject class="node" x="46" y="22" width="50" height="50">
            <div style="border:1px green solid">Wrapped div in svg.</div>               
    </foreignobject>
</svg>

使用开关工作iline svg：

<svg width="500" height="300" style="border:1px red solid">
    <switch>

        <foreignobject class="node" x="46" y="22" width="50" height="50">
            <div style="border:1px green solid">Wrapped div in svg.</div>               
        </foreignobject>

        <text font-size="10" font-family="Verdana">
          <tspan x="10" y="100">Here is a paragraph that</tspan>
          <tspan x="10" y="120">requires word wrap.</tspan>
        </text> 

    </switch>
</svg>

在包含的文件中不使用svg。哪里出错？我曾尝试使用和不使用requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"

<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700px" height="200px" viewBox="0 0 700 200">

  <switch>  

    <foreignobject class="node" x="46" y="22" width="200" height="100" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML" >
        <div style="border:1px green solid">I'm a div inside a SVG.</div>                
    </foreignobject>

    <text font-size="10" font-family="Verdana">
      <tspan x="10" y="10">Here is a paragraph that</tspan>
      <tspan x="10" y="20">requires word wrap.</tspan>
    </text>
  </switch>
</svg>

如何将外来对象嵌入到svg文件中？

0 个答案: