首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何在加载SVGweb时使用jQuery嵌入SVG (即问题)

如何在加载SVGweb时使用jQuery嵌入SVG (即问题)
EN

Stack Overflow用户
提问于 2011-11-07 15:14:04
回答 2查看 1.1K关注 0票数 2

这是我尝试嵌入的svg:

代码语言:javascript
复制
  <script type="image/svg+xml">
    <svg width="200" height="200"
         style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
         id="embeddedSVG">
      <g id="myGroup" 
         fill="blue" 
         style="font-size: 18px; text-anchor: middle; font-family: serif;">
        <circle id="myCircle"
                cx="100" cy="75" r="50"
                stroke="firebrick"
                stroke-width="3" />
        <text x="100" y="155">Hello World</text>
        <text x="100" y="175">From Embedded SVG!</text>
      </g>
    </svg>
  </script>
  <noscript>
    <h1>Optional fallback content goes here!</h1>
  </noscript>

这在ie6-8中很好,SVGweb可以:

代码语言:javascript
复制
<OBJECT style="BACKGROUND-COLOR: #d2b48c; DISPLAY: block; MARGIN-BOTTOM: 5px; OVERFLOW: hidden" id=embeddedSVG_flash class=embedssvg name=embeddedSVG_flash codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" classid=clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 width=200 height=200><PARAM NAME="_cx" VALUE="5291"><PARAM NAME="_cy" VALUE="5291"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="js/svg.swf"><PARAM NAME="Src" VALUE="js/svg.swf"><PARAM NAME="WMode" VALUE="Window"><PARAM NAME="Play" VALUE="0"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE="LT"><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE="always"><PARAM NAME="Scale" VALUE="NoScale"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE="D2B48C"><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false">
      <embed src="js/svg.swf" quality="high" bgcolor="#d2b48c" 
width="200" height="200" id="embeddedSVG_flash" name="embeddedSVG_flash" swLiveConnect="true" allowScriptAccess="always" type="application/x-shockwave-flash" FlashVars="uniqueId=embeddedSVG&sourceType=string&clipMode=both&debug=true&svgId=embeddedSVG" pluginspage="http://www.macromedia.com/go/getflashplayer" style="background-color: #d2b48c; display: block; margin-bottom: 5px;overflow: hidden;"
 class="embedssvg"  /></OBJECT><NOSCRIPT></NOSCRIPT>

但是当我添加jQuery时:

代码语言:javascript
复制
<script src="js/jquery.js" type="text/javascript"></script>

SVG没有在ie6-8中呈现(但它使用的是chrome,ff,.):

代码语言:javascript
复制
<script type="image/svg+xml">
<svg width="200" height="200" style="background-color: #D2B48C; display: block; margin-bottom: 5px;"              id="embeddedSVG">           
<g id="myGroup" fill="blue" style="font-size: 18px; text-anchor: middle; font-family: serif;">                <circle id="myCircle"  cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />           
<text x="100" y="155">Hello World</text>             
<text x="100" y="175">From Embedded SVG!</text>           
</g>         
</svg>
</script>

我希望SVGweb能够以同样的方式工作,这与是否加载jQuery无关。如何使用SVGweb嵌入SVG,以便在加载jQuery时在ie6-8中显示?

编辑:

我可能找到了解决办法。如果我在jQuery之前引入SVGweb,它就会起作用。然而,在SVGweb手册中却写着:

首先,您必须将

文件作为页面上的第一个脚本引入到svg.js页面中,在所有其他

之前。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-14 16:18:21

在jQuery解决问题之前包括SVGweb (如我在编辑中所指出的)。

票数 0
EN

Stack Overflow用户

发布于 2012-07-18 08:11:22

您的解决方案是不好的,因为svgWeb可能会覆盖jQuery函数,比如onload事件处理程序.尝试将svgWeb更新到最新版本,并将其作为第一个脚本标记放在头节点中。

@Mathias

你试过这种语法了吗?对我起作用了。

代码语言:javascript
复制
mysvg.load = mysvg.onsvgload = function(){
    //Handler
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8038440

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档