当前位置: 开发笔记 > 编程语言 > 正文

如何在HTML中使用外部SVG？

作者：qqqq | 来源：互联网 | 2023-05-20 21:57

如何解决《如何在HTML中使用外部SVG？》经验，为你挑选了1个好方法。

我尝试制作一个引用SVG文件的HTML,该SVG文件是交互式的(CSS悬停):

如果我使用我松散的交互性.

SVG显示为嵌入在HTML页面中的图像

如果我使用开发工具在新选项卡中打开此图像,它将变为交互式.

SVG在浏览器中打开,显示交互式亮点

如果我使用:

然后没有显示任何内容,更糟糕的是,Chrome或Firefox不会在网络开发工具中检测到该文件.

NikitaBaksal.. 45

您应该使用

有关详细信息,请参阅此问题:对于SVG文件,我是否使用,

有关详细信息,请参阅此问题:对于SVG文件,我是否使用,或？


        
不需要`type ="image/svg + xml"`,最好与`width`和`height`属性一起使用! 
假设SVG有一个``或``或``等元素.是否可以通过``方法为这些元素设置`fill`或`stroke`属性？




    
        
                        css
                        css3
                        html5
                        svg
                        html
                        文件
                        view
                        chrome
                        firefox
                    
    



    
        写下你的评论吧 !
        
            
                吐个槽吧,看都看了
            
            
                
                                        会员登录 | 用户注册
                                    
                
            
        

        
    

    
        推荐阅读
        
            
                                
                    
                        text
                        前端提高篇(七十)：SVG基本使用、基本样式、路径path
                    

                    
                                                
                            
                        
                                                
                        SVG是使用XML来描述二维图形和绘图程序的语言。SVG遵循的是xml的规范，与html5的使用有所区别SVG绘制出来的是矢量图，放大之后不会失真官方文 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 15:30:33
                    

                

                
                                
                    
                        object
                        翻译 | 编写SVG的口袋指南（上）
                    

                    
                                                
                            
                        
                                                
                        作者：DDU（沪江前端开发工程师）本文是原文翻译，转载请注明作者及出处。简介ScalableVectorGraphics(SVG)是在XML中描述二维图形的语言。这些图形由路径，图 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-16 19:49:19
                    

                

                                
                    
                    
                
                
                                
                    
                        text
                        在类中定义数组时出错 - Error on defining arrays in class
                    

                    
                                                
                        Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 17:38:12
                    

                

                
                                
                    
                        object
                        kotlin动画实现上下移动、放大缩小、旋转功能
                    

                    
                                                
                        本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 17:29:08
                    

                

                
                                
                    
                        object
                        使用 Ubuntu 中的 Python 获取浏览器历史记录
                    

                    
                                                
                        使用Ubuntu中的Python获取浏览器历史记录原文: ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-14 08:57:59
                    

                

                
                                
                    
                        text
                        后台获取视图对应的字符串
                    

                    
                                                
                            
                        
                                                
                        1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注：不会执行对应的ac ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-13 18:03:01
                    

                

                
                                
                    
                        select
                        Oracle seg,V$TEMPSEG_USAGE与Oracle排序的关系及使用方法
                    

                    
                                                
                            
                        
                                                
                        本文介绍了Oracle seg,V$TEMPSEG_USAGE与Oracle排序之间的关系，V$TEMPSEG_USAGE是V_$SORT_USAGE的同义词，通过查询dba_objects和dba_synonyms视图可以了解到它们的详细信息。同时，还探讨了V$TEMPSEG_USAGE的使用方法。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 17:57:15
                    

                

                
                                
                    
                        web
                        前端人员必须知道的三个问题及其发展阶段
                    

                    
                                                
                        本文介绍了前端人员必须知道的三个问题，即前端都做哪些事、前端都需要哪些技术，以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外，还介绍了一些后端服务，如Node.js。 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-12-12 12:45:59
                    

                

                
                                
                    
                        web
                        FileReader详解与实例---读取并显示图像文件
                    

                    
                                                
                            
                        
                                                
                        我们曾经在《HTML5中File对象初探》中，使用到了FileReader，在那篇文章中，它被用来将一个文件读取为二进制字符串，并通过xhr发送到后端形成交互。作为FileAPI的一部 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 16:35:41
                    

                

                
                                
                    
                        select
                        前端~javascript~webAPI/文档对象模型Dom/Dom树/事件机制/操作元素/实战案例：实现网页计数器
                    

                    
                                                
                            
                        
                                                
                        文章目录WebAPI简介DomDom树获取Dom元素事件事件三要素操作dom元素innerHTMLinnerText实战案例：实现网页计数器WebAPI简介什么是AP ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 12:28:05
                    

                

                
                                
                    
                        select
                        二十二、D3 饼图
                    

                    
                                                
                        二十二、D3饼图Abstract在前一章中，你已经看到了条形图是如何表示某一类数 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-15 11:27:27
                    

                

                
                                
                    
                        object
                        扩大微信小顺序 Page 组织函数，修正性命周期函数
                    

                    
                                                
                        不BB,直接正题一.将大众要领绑定到Page上单个绑定constoldPagePagePagefunction(app){注重大众函数的名字不要反复，不然掩盖app.utilfun ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 20:49:01
                    

                

                
                                
                    
                        web
                        HTTP协议学习（六）缓存
                    

                    
                                                
                            
                        
                                                
                        本文介绍浏览器和Web服务器之间如何处理浏览器缓存，以及控制缓存的httpheader.本文会使用Fiddler来查看HTTPrequest和Response,如 ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 12:05:16
                    

                

                
                                
                    
                        text
                        将两个内嵌块左右对齐放在同一行上 - Align two inline-blocks on same line, one to the left and one to the right
                    

                    
                                                
                        HowcanIaligntwoinline-blockssothatoneisleftandtheotherisrightonthesameline?Whyi ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-14 08:37:52
                    

                

                
                                
                    
                        web
                        React图片输入框移动端网页_018
                    

                    
                                                
                            
                        
                                                
                        React-图片输入框-移动端网页gitHub地址觉得有参考价值，点个赞https:github.comxiaopingzh…目录结构.├──README.md├──dist│├─ ...
                        [详细]
                    
                    

                    
                        蜡笔小新   2023-10-13 18:11:44

















    

    
        
            
            
                
                
            

            
                qqqq            

            
                这个家伙很懒，什么也没留下！            


        
    

    
    

    
    

    
        Tags | 热门标签
        
            
                                
                    php8
                
                                
                    triggers
                
                                
                    cSharp
                
                                
                    cmd
                
                                
                    window
                
                                
                    web
                
                                
                    tags
                
                                
                    httpclient
                
                                
                    netty
                
                                
                    yaml
                
                                
                    filter
                
                                
                    dll
                
                                
                    spring
                
                                
                    python
                
                                
                    string
                
                                
                    eval
                
                                
                    express
                
                                
                    httprequest
                
                                
                    jsp
                
                                
                    object
                
                                
                    javascript
                
                                
                    数组
                
                                
                    substring
                
                                
                    text
                
                                
                    c语言
                
                                
                    bash
                
                                
                    lua
                
                                
                    instance
                
                                
                    actionscrip
                
                                
                    select
                
                                
            
        
    

    
    
        
            
            
        
        RankList | 热门文章
        
            
                                
                    1迅为4418开发板平台应用于智能门禁系统
                
                                
                    2深夜求救，gcc编译器好像出问题了
                
                                
                    3Linux静默安装Oracle 11g教程
                
                                
                    4中点|升序_算法模板链表
                
                                
                    5php网站首页代码,PHP网站代码
                
                                
                    6实时监控mysql数据库变化
                
                                
                    7错误：上传App Store 时报错
                
                                
                    8微软送福利啦！微软发布免费文件恢复工具，再也不担心文件丢失了
                
                                
                    9字节跳动靠谱内推前端工程师（上海 · 飞书）
                
                                
                    10Python之基础篇（三）
                
                                
                    11javaWeb_JDBC_DButils基本使用
                
                                
                    12纳帕溪谷打造全新的生活空间
                
                                
                    13默认主页被篡改为360导航如何解决！
                
                                
                    14JavaFX程序初次运行创建数据库并执行建表SQL
                
                                
                    15WAMP环境搭建与Testlink1.9.16的安装