首页
互助圈
新手教程
进阶之路
算法原理
架构设计
JAVA进阶
C/C++进阶
Python进阶
JavaScript
数据库
大数据
消息服务
源码解读
JAVA源码
Spring源码
数据库
消息服务
Dubbo源码
面试指南
大厂专栏
面试技巧
面试经验
面试题库
开发资料
文档资料
工具软件
电子书籍
小牛导航
在线工具
登录
目录
使用
标签
使用
标签
使用
标签</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('jkxwef');">直接在HTML嵌入SVG代码</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('igtfws');">链接到SVG文件</a></li> </ul> </nav> </div> </div> </div> <div class="content" data-v-g=""> <div class="wzdh-v"> 当前位置： <a href="/">首页</a> > <a href="/shouce/">文档资料</a> > <a href="/shouce/1962/">SVG 教程</a> > </div> <div><div> <a href="/link/redirect?r=https://www.xnip.cn/biji/255610.html" target="_blank"> <img src="https://imgs.xnip.cn/imgs/index/banner.jpeg"> </a> </div></div> <div class="content-container" data-v-g=""> <main class="main" data-v-g=""> <div class="vp-doc" data-v-g=""> <div> <h1 id="content" tabindex="-1">SVG 在 HTML 中</h1> <div data-v-h="" class="meta-wrapper"> <div data-v-h="" class="meta-item original"> <span data-v-h="" class="arco-tag arco-tag-size-medium arco-tag-orangered arco-tag-checked"> 优质 </span> </div> <div data-v-h="" class="meta-item"> <span data-v-h="" class="meta-content"> <i class="fa fa-user-o"></i> 小牛编辑 </span> </div> <div data-v-h="" class="meta-item"> <span data-v-h="" class="meta-content"> <i class="fa fa-eye"></i> <span>125浏览</span> </span> </div> <div data-v-h="" class="meta-item"> <i class="fa fa-clock-o"></i> <span data-v-h="" class="meta-content">2023-12-01</span> </div> <div style="margin-top: 20px"><p>SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。</p><p>SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。</p><h2 id="ynbdln">使用 <embed> 标签</h2><p><embed>:</p><ul><li>优势：所有主要浏览器都支持，并允许使用脚本</li><li>缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）</li></ul><p><b>语法:</b></p><embed src="circle1.svg" type="image/svg+xml" /><p><b>结果：</b></p><h2 id="hjdggt">使用 <object> 标签</h2><p><object>:</p><ul><li>优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准</li><li>缺点：不允许使用脚本。</li></ul><p><b>语法:</b></p><object data="circle1.svg" type="image/svg+xml"></object><p><b>结果：</b></p><h2 id="hnsfey">使用 <iframe> 标签</h2><p><iframe>:</p><ul><li>优势：所有主要浏览器都支持，并允许使用脚本</li><li>缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）</li></ul><p><b>语法:</b></p><iframe src="circle1.svg"></iframe><p><b>结果:</b></p><h2 id="jkxwef">直接在HTML嵌入SVG代码</h2><p>在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。</p><svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg><br /><h2 id="igtfws">链接到SVG文件</h2><p>您还可以用<a>标签链接到一个SVG文件：链接到SVG文件</p><p>您还可以用<a>标签链接到一个SVG文件：</p><a href="circle1.svg">View SVG file</a><p><b>结果:</b></p>查看 SVG 文件</div> </div> </div> </div> </main> <div data-v-zd="" class="copyright"> <div data-v-zd="" class="content"> <div data-v-zd="" class="item"> <span data-v-zd="">免责声明：</span> <span data-v-zd="">以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。</span> </div> </div> </div> <footer class="vcft" data-v-g="" data-v-i=""> <div class="edit-info" data-v-i=""> <div class="edit-link" data-v-i=""> <a class="vpk link edit-link-button" href="/fankui.html?type=2&id=111414" target="_blank" rel="noreferrer" data-v-i="" data-v-e=""> <span class="edit-link-icon" data-v-i=""></span>不妥之处，敬请雅正 </a> </div> <div class="last-updated" data-v-i=""> <p class="VPLastUpdated" data-v-i="" data-v-j="">最后更新: <time data-v-j="">2023-12-01</time> </p> </div> </div> <div class="prev-next" data-v-i=""> <div class="pager" data-v-i=""> <a class="pager-link" href="/shouce/1962/111413.html" data-v-i="" title="SVG 实例"> <span class="desc" data-v-i="">上一篇</span> <span class="title" data-v-i="">SVG 实例</span> </a> </div> <div class="has-prev pager" data-v-i=""> <a class="pager-link" href="/shouce/1962/111415.html" data-v-i="" title="SVG 矩形"> <span class="desc" data-v-i="">下一篇</span> <span class="title" data-v-i="">SVG 矩形</span> </a> </div> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">类似资料</h2> <ul class="items"> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/tiku/198339.html" class="t-f" title="在HTML中显示HTML代码段">在HTML中显示HTML代码段</a> </div> <p class="item-c-main">问题内容： 如何在网页上显示HTML代码段，而无需用和替换？ 换句话说，是否有一个标记，用于 在您点击结束标记之前不呈现HTML ？ 问题答案： 不 ，没有。在HTML适当的版本中，必须逃脱一些字符： 如 如 （顺便说一句，没有必要逃脱，但人们经常出于对称的原因而逃脱。） 当然，您应该将生成的，转义的HTML代码包围在（a）保留空格和换行符的范围内，以及（b）将其标记为代码元素。 所有其他解决方案</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/biji/123440.html" class="t-f" title="如何在HTML表中使用HTML标签？">如何在HTML表中使用HTML标签？</a> </div> <p class="item-c-main">本文向大家介绍如何在HTML表中使用HTML标签？，包括了如何在HTML表中使用HTML标签？的使用技巧和注意事项，需要的朋友参考一下 使用HTML，您可以轻松地在表内添加HTML标签。标签应在<td>标签内打开和关闭。例如，添加段落<p> ... </>标记，甚至添加列表标记，即<ul> ... <ul>。 示例 您可以尝试运行以下代码以在HTML表中使用HTML标签<ul>…</ ul></p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/tiku/144859.html" class="t-f" title="在python中创建HTML">在python中创建HTML</a> </div> <p class="item-c-main">问题内容： 我正在寻找一种在python中动态创建html文件的方法。我正在编写画廊脚本，该脚本在目录中进行迭代，收集文件元数据。然后，我打算使用此数据基于html自动创建图片库。事情很简单，只是一张图片表。 我真的不认为手动写入文件是最好的方法，并且代码可能很长。那么，有没有更好的方法可以做到这一点，可能是html特定的？ 问题答案： 我认为，如果我对您的理解正确，那么您可以在此处看到“使用Py</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/tiku/86347.html" class="t-f" title="在Python中清理HTML">在Python中清理HTML</a> </div> <p class="item-c-main">问题内容： 我正在汇总来自一些外部来源的内容，发现其中一些内容的HTML / DOM中包含错误。一个很好的例子是HTML缺少结束标记或格式错误的标记属性。有没有办法清除Python本身或我可以安装的任何第三方模块中的错误？ 问题答案： 我建议Beautifulsoup。它具有出色的解析器，可以相当优雅地处理格式错误的标记。阅读完整个树后，就可以输出结果了。 我已经使用过很多次了，它的确很神奇。如果</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/wenda/166798.html" class="t-f" title="在Jsoup中解析html">在Jsoup中解析html</a> </div> <p class="item-c-main">我试图在这里使用JSOUP解析html标记。我对jsoup是新来的。基本上，我需要解析这些标记，获取这些标记中的文本，并应用class属性中提到的样式。 我正在创建一个SpannableStringBuilder，它可以创建子字符串，应用样式，并将它们附加到没有样式的文本中。 我不确定如何解析不在任何标记之间的字符串，例如“there are”和“worker from the”。 需要输出，例如</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/623/46767.html" class="t-f" title="9.3 SVG 用在HTML中">9.3 SVG 用在HTML中</a> </div> <p class="item-c-main">在HTML4的规范中，SVG文件可通过以下标签嵌入HTML文档：<embed>、<object> 或者 <iframe>。而HTML5直接支持SVG内嵌。 <html> <!DOCTYPE html> <body> <h1>My first SVG</h1> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" str</p> </div> </li> </ul> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">相关阅读</h2> <a href="/tiku/198438.html" target="_blank" title="在HTML文件中包含另一个HTML文件" class="card-item-v list-item-dot">在HTML文件中包含另一个HTML文件</a><a href="/tiku/169085.html" target="_blank" title="在Go中安装exp / html" class="card-item-v list-item-dot">在Go中安装exp / html</a><a href="/tiku/201070.html" target="_blank" title="禁止在HTML中选择" class="card-item-v list-item-dot">禁止在HTML中选择</a><a href="/wenda/374773.html" target="_blank" title="在html/xhtml中解析RDFa？" class="card-item-v list-item-dot">在html/xhtml中解析RDFa？</a><a href="/tiku/128993.html" target="_blank" title="在Python中验证（X）HTML" class="card-item-v list-item-dot">在Python中验证（X）HTML</a><a href="/wenda/227180.html" target="_blank" title="在OpenXML中插入HTML表" class="card-item-v list-item-dot">在OpenXML中插入HTML表</a><a href="/tiku/191441.html" target="_blank" title="在没有任何html标签的html中隐藏文本" class="card-item-v list-item-dot">在没有任何html标签的html中隐藏文本</a><a href="/wenda/363795.html" target="_blank" title="HTML电子邮件不会显示在其HTML文件中" class="card-item-v list-item-dot">HTML电子邮件不会显示在其HTML文件中</a><a href="/tiku/237306.html" target="_blank" title="在JEditorPane中显示HTML文件" class="card-item-v list-item-dot">在JEditorPane中显示HTML文件</a><a href="/tiku/210339.html" target="_blank" title="在fancybox中打开html页面" class="card-item-v list-item-dot">在fancybox中打开html页面</a><a href="/tiku/192060.html" target="_blank" title="在HTML中显示Unicode符号" class="card-item-v list-item-dot">在HTML中显示Unicode符号</a><a href="/tiku/191776.html" target="_blank" title="在Android中解码HTML实体" class="card-item-v list-item-dot">在Android中解码HTML实体</a><a href="/tiku/191723.html" target="_blank" title="在Java中剥离HTML标签" class="card-item-v list-item-dot">在Java中剥离HTML标签</a><a href="/tiku/191670.html" target="_blank" title="3D在此HTML中做什么？" class="card-item-v list-item-dot">3D在此HTML中做什么？</a><a href="/tiku/191580.html" target="_blank" title="在HTML中对齐小数点" class="card-item-v list-item-dot">在HTML中对齐小数点</a><a href="/tiku/187960.html" target="_blank" title="在javascript中编码html实体" class="card-item-v list-item-dot">在javascript中编码html实体</a><a href="/tiku/198466.html" target="_blank" title="如何在PHP中回显HTML？" class="card-item-v list-item-dot">如何在PHP中回显HTML？</a><a href="/tiku/198338.html" target="_blank" title="如何在TextView中显示HTML？" class="card-item-v list-item-dot">如何在TextView中显示HTML？</a><a href="/tiku/202759.html" target="_blank" title="在Swift中从WKWebview获取HTML" class="card-item-v list-item-dot">在Swift中从WKWebview获取HTML</a><a href="/wenda/138790.html" target="_blank" title="在Chrome中呈现HTML文件" class="card-item-v list-item-dot">在Chrome中呈现HTML文件</a><a href="/wenda/141669.html" target="_blank" title="如何在xml中加载html" class="card-item-v list-item-dot">如何在xml中加载html</a><a href="/tiku/231657.html" target="_blank" title="如何在Java中获取HTML" class="card-item-v list-item-dot">如何在Java中获取HTML</a><a href="/tiku/126983.html" target="_blank" title="在Node.js中加载基本HTML" class="card-item-v list-item-dot">在Node.js中加载基本HTML</a><a href="/tiku/110572.html" target="_blank" title="如何在PHP中解析HTML？" class="card-item-v list-item-dot">如何在PHP中解析HTML？</a><a href="/tiku/252031.html" target="_blank" title="如何在HTML中嵌入jar" class="card-item-v list-item-dot">如何在HTML中嵌入jar</a><a href="/wenda/261988.html" target="_blank" title="在 php 中提交 html 表单" class="card-item-v list-item-dot">在 php 中提交 html 表单</a><a href="/wenda/181531.html" target="_blank" title="在PHP代码中嵌入HTML" class="card-item-v list-item-dot">在PHP代码中嵌入HTML</a><a href="/shouce/914/62463.html" target="_blank" title="QueryList html($html)" class="card-item-v list-item-dot">QueryList html($html)</a><a href="/tiku/198196.html" target="_blank" title="在React组件中将HTML字符串呈现为真实HTML" class="card-item-v list-item-dot">在React组件中将HTML字符串呈现为真实HTML</a><a href="/biji/90280.html" target="_blank" title="vue实现在v-html的html字符串中绑定事件" class="card-item-v list-item-dot">vue实现在v-html的html字符串中绑定事件</a><a href="/wenda/183314.html" target="_blank" title="在React组件中将HTML字符串呈现为真实HTML" class="card-item-v list-item-dot">在React组件中将HTML字符串呈现为真实HTML</a><a href="/tiku/192999.html" target="_blank" title="在iPhone上解析HTML" class="card-item-v list-item-dot">在iPhone上解析HTML</a> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">开发工具</h2> <a href="/ruanjian/68260.html" target="_blank" title="html" class="card-item-v-gj list-item-dot">html</a><a href="/ruanjian/18746.html" target="_blank" title="HTML Purifier" class="card-item-v-gj list-item-dot">HTML Purifier</a><a href="/ruanjian/37042.html" target="_blank" title="HTML Tidy" class="card-item-v-gj list-item-dot">HTML Tidy</a><a href="/ruanjian/16020.html" target="_blank" title="Requests-HTML" class="card-item-v-gj list-item-dot">Requests-HTML</a><a href="/ruanjian/33328.html" target="_blank" title="HTML Preview" class="card-item-v-gj list-item-dot">HTML Preview</a><a href="/ruanjian/33256.html" target="_blank" title="athena-html" class="card-item-v-gj list-item-dot">athena-html</a><a href="/ruanjian/28901.html" target="_blank" title="HTML KickStart" class="card-item-v-gj list-item-dot">HTML KickStart</a><a href="/ruanjian/107261.html" target="_blank" title="mp-html" class="card-item-v-gj list-item-dot">mp-html</a><a href="/ruanjian/93680.html" target="_blank" title="HTML Truncator" class="card-item-v-gj list-item-dot">HTML Truncator</a><a href="/ruanjian/87614.html" target="_blank" title="HTML-Pipeline" class="card-item-v-gj list-item-dot">HTML-Pipeline</a><a href="/ruanjian/75268.html" target="_blank" title="HTML-GL" class="card-item-v-gj list-item-dot">HTML-GL</a><a href="/ruanjian/65829.html" target="_blank" title="html-textview" class="card-item-v-gj list-item-dot">html-textview</a><a href="/ruanjian/56241.html" target="_blank" title="html-sketchapp" class="card-item-v-gj list-item-dot">html-sketchapp</a><a href="/ruanjian/47828.html" target="_blank" title="HTML Inspector" class="card-item-v-gj list-item-dot">HTML Inspector</a><a href="/ruanjian/46085.html" target="_blank" title="Mario HTML" class="card-item-v-gj list-item-dot">Mario HTML</a><a href="/ruanjian/39451.html" target="_blank" title="Fruit-HTML" class="card-item-v-gj list-item-dot">Fruit-HTML</a><a href="/ruanjian/19568.html" target="_blank" title="html-templates" class="card-item-v-gj list-item-dot">html-templates</a><a href="/ruanjian/19140.html" target="_blank" title="html-parser" class="card-item-v-gj list-item-dot">html-parser</a> </div> </footer> </div> </div> </div> </div> </div> <div class="footer v-footer"> <span>@小牛知识库 xnip.cn </span> </div> </div> </div> </body> <script src="https://imgs.xnip.cn/highlight/highlight.min.js"></script> <script src="https://imgs.xnip.cn/highlight/clipboard.min.js"></script> <script src="https://imgs.xnip.cn/last.js"></script> <script type="text/javascript"> var id = 111414; $id('xbaid').scrollTop = $id('id_' + id).offsetTop - 300; </script> </html>
