【svg】引入svg（非图标）

最新推荐文章于 2024-01-03 12:05:39 发布

折桂怀橘

最新推荐文章于 2024-01-03 12:05:39 发布

阅读量664

点赞数

分类专栏：前端相关知识文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42910765/article/details/129254784

版权

前端相关知识专栏收录该内容

81 篇文章 8 订阅

订阅专栏

这里写目录标题

目的：如果直接以图片的方式引用svg 不能改变内层svg的属性 ,但是一下都引用方式都不能满足我的需求（svg的大小，内部背景颜色或者线条的颜色根据外部传入的值更改），最后我写了一个npm插件 ✌地址

直接插入页面—— 有各层svg内容并可赋值属性

<body>
    <svg>
        <circle>......</circle>
    </svg>
</body>

css 背景图 ——不可更改各层svg属性

 div {background-image:url("svg文件路径")}

创建标签（动态添加）——可改属性但是还不如直接插入

 mounted () {
        let svg = this.makeSVG('svg');
        let g = this.makeSVG('g');
        var circle = this.makeSVG('circle', { cx: 50, cy: 50, r: 10, stroke: 'black', 'stroke-width': 2, fill: 'red' });
        let terget = document.getElementById('s');
        g.appendChild(circle);
        svg.appendChild(g);
        terget.appendChild(svg);

    },
 methods: {
        makeSVG (tag, attrs) {
            const ns = 'http://www.w3.org/2000/svg';
            let el = document.createElementNS(ns, tag);
            for (let k in attrs) {
                el.setAttribute(k, attrs[k]);
            }
            return el;
        }
    }

在这里插入图片描述

textContent属性可以获取和设置text元素文本：

/ SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
 
// JS
<script>
    var text = document.getElementById( "text" );
    console.log( text.textContent ); // foo
    text.textContent = "Hello world!"; // 重新设置文本
</script>

获取元素高宽和坐标：getBBox方法可以获取所有元素的高宽和坐标：

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
 
// JS
<script>
    var text = document.getElementById( "text" );
    console.log( text.getBBox() ); // {height: 16, width: 32, y: 11, x: 25} 
</script>

SVG也可以像HTML那样为元素添加自定义事件。
使用on + 事件名属性监听：

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
 
// JS
<script>
    var text = document.getElementById( "text" );
    // 点击文本时弹出其内容
    text.onclick = function() {
        alert( this.textContent );
    };
</script>

也可以使用element.addEventListener方法监听：

// SVG
<text id="text" x="25" y="25" font-size="16" style="fill:rgb(0,0,0);">foo</text>;
 
// JS
<script>
    var text = document.getElementById( "text" );
    // 点击文本时弹出其内容
    // 事件名前面不带on
    text.addEventListener( 'click', function() {
        alert( this.textContent );
    } );
</script>

两种方法有什么不同？on +事件名属性只能为同一个事件添加一个处理方法，再对这个属性进行设置时会覆盖掉上一个方法，而element.addEventListener多次使用也不会覆盖上一个，而是从原来的事件上叠加

不常用（没弄明白）

object标签

<object type="image.svg+xml data="svg文件路径"></object>

在这里插入图片描述

embed标签 效果同object 不知原因

<embed type="image/svg+xml" src="svg文件路径"></embed>

iframe标签 效果同object 不知原因

<iframe src="svg文件路径"></iframe>

折桂怀橘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【svg】引入svg（非图标）

on +事件名属性只能为同一个事件添加一个处理方法，再对这个属性进行设置时会覆盖掉上一个方法，而element.addEventListener多次使用也不会覆盖上一个，而是从原来的事件上叠加。目的：如果直接以图片的方式引用svg 不能改变内层svg的属性 ,但是一下都引用方式都不能满足我的需求（svg的大小，内部背景颜色或者线条的颜色根据外部传入的值更改），最后我写了一个npm插件 ✌。SVG也可以像HTML那样为元素添加自定义事件。效果同object 不知原因。效果同object 不知原因。
复制链接

扫一扫