精华内容
下载资源
问答
  • 前端:background-image引入svg图片背景浅析概述掌握的知识background-image相关属性svg相关属性核心 概述 background-image引入图片,之前给笔者印象是利用background-size属性、background-repeat属性可以控制...

    前端:background-image引入svg图片背景浅析

    概述

    background-image引入图片,之前给笔者印象是利用background-size属性、background-repeat属性可以控制图片的缩放,拉伸从而实现背景图片的自适应。但是当遇到background-image遇到svg时,发现了不一样的结果。主要原因是 — SVG可以设置比例(viewBox、preserveAspectRatio)造成。

    掌握的知识

    background-image相关属性

    • background-image
      通过url加载图片资源,比如说svg、png等等
    • background-size
      控制加载资源的大小,这个属性可以覆盖svg的宽高

    svg相关属性

    • viewBox
      视图坐标系(个人定义,因为既有坐标系的功能,又定义了绘制图片的范围),在此坐标系内绘制各种图形。
    • preserveAspectRatio
      统一缩放比例,该属性用于当视窗(viewport)与视图坐标系(viewBox)比例不一致时,该如何缩放摆放

    核心

    因为通过使用background-size的属性,控制viewport,通过viewBox控制视窗的大小,由于preserverAspectRatio的默认属性不是none。所以无法拉伸,只能调节viewBox的位置来布局。

    展开全文
  • 因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作。同时还是因为微信小程序的限制,我们要先把svg的xml编码转码为base64编码 ...
  • 微信小程序里引入SVG矢量图标

    万次阅读 2018-08-04 11:00:41
    因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作。同时还是因为微信小程序的限制,我们要先把svg的xml编码...

    引言

    因为微信小程序的限制,引入外部图片或者矢量图,只能通过设置背景图片background-image : url("base64转码后的代码");的方式来进行操作。同时还是因为微信小程序的限制,我们要先把svg的xml编码转码为base64编码

    首先,说明以下我们常见的svg矢量图是什么?下面引用百度百科的话:
    svg是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式
    

    可能还是比较迷糊,那我们来看看,用记事本打开一个svg,里面的编码是什么:

    <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 
    1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg 
    t="1532946882675" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" 
    xmlns="http://www.w3.org/2000/svg" p-id="826" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="200" 
    height="200"><defs><style type="text/css"></style></defs><path d="M914.75 
    466.75L832 384V256a64.19 64.19 0 0 0-64-64H640l-82.75-82.75a64.19 64.19 0 0 
    0-90.51 0L384 192H256a64.19 64.19 0 0 0-64 64v128l-82.75 82.75a64.19 64.19 0 
    0 0 0 90.51L192 640v128a64.19 64.19 0 0 0 64 64h128l82.75 82.75a64.19 64.19 0 
    0 0 90.51 0L640 832h128a64.19 64.19 0 0 0 64-64V640l82.75-82.75a64.19 64.19 0 
    0 0 0-90.5zM512 736L320 384h96l96 192 96-192h96z" p-id="827" 
    fill="#F36778"></path></svg>
    

    好了,你看到了<?xml/svg11.dtd,那我们就明白了,这是一种由特定的DTD约束的xml文件,www标准组织定义了这个标准或者说约束,来描述定义svg,所以我们可以知道svg其实就是xml的一个小子集。

    步骤

    好了,下面介绍一个网站,用来将xml文件编码转码为base64编码: https://www.sojson.com/image2base64.html

    1、在的网站的选择组件中选择需要转换的svg,然后在网站下面的转换框中复制转换成功的base64格式的代码

    这里写图片描述

    2、将复制后的代码粘贴到this=> [background-image : url("this")],然后对应的view或者text中加入样式即可

    WXSS
    这里写图片描述

    WXML
    这里写图片描述

    效果图
    这里写图片描述

    PS

    顺便安利一下这个网站,虽然界面不怎么美观,但是功能确实良心,作为前端开发的辅助工 具网站还是蛮OK滴~

    做个引流?

    博主最近开了一个微信公众号,以全栈技术为初衷,里面会分享我自己写的认为比较好的原创文章,博客会部分同步,感谢关注!
    在这里插入图片描述

    展开全文
  • C#在Winform的PictureBox...实现思路很简单,就是需要从NuGet中引入SVG Rennering Library(ARES),然后通过其提供的SvgDocument实现把svg文件内容转换为Image对象。 环境说明 VS2013 .netframework4.5.1 实现步骤 1、新

    C#在Winform的PictureBox控件中显示Svg图片

    背景

    我们知道Svg是一种矢量图形格式,广泛应用与Web App、手机App,本文就介绍一下在Winform的窗口程序中怎么实现显示Svg图片。

    实现思路

    实现思路很简单,就是需要从NuGet中引入SVG Rennering Library(ARES),然后通过其提供的SvgDocument实现把svg文件内容转换为Image对象。

    环境说明

    VS2013
    .netframework4.5.1

    实现步骤

    1、新建一个空白解决方案,然后在此解决方案下新建一个Winform应用,目标框架选择.NET Framework 4.5.1。
    2、鼠标右键新建的winform工程,在弹出菜单中选择“管理NuGet程序包”,弹出如下对话框:
    在这里插入图片描述
    左侧选择联机,右侧关键词位置输入SVG ARES回车。就可以在搜索结果中看到SVG Rendering Library(ARES)。
    3、点击安装按钮进行依赖库安装。
    4、在winform工程中新建窗体FrmSvgDemo,修改Program.cs中的Form1位FrmSvgDemo。
    5、在新建的窗体中放一个按钮和一个PictureBox控件,如下图:
    在这里插入图片描述
    6、在winform工程下新建一个文件夹images,找一个svg图片文件放入此文件夹,如果不知道哪有可以到https://www.iconfont.cn/这个网站去下载。
    7、关键代码如下:

    private void button1_Click(object sender, EventArgs e)
    {
         string svgFile = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "images\\销售单据.svg");
         Image img = this.ConvertSvgToImage(svgFile, this.pictureBox1.Width, this.pictureBox1.Height);
         this.pictureBox1.Image = img;
     }
    
     /// <summary>
     /// 把Svg文件按指定宽度和高度转为Image对象
     /// </summary>
     /// <param name="svgFile">Svg文件完整路径</param>
     /// <param name="width">转换后的图像宽度</param>
     /// <param name="height">转换后的图像高度</param>
     /// <returns>返回转换后的Image对象</returns>
     public Image ConvertSvgToImage(string svgFile, int width, int height)
     {
         Image imgResult = null;
         if (System.IO.File.Exists(svgFile))
         {
             SvgDocument sdoc = SvgDocument.Open(svgFile);
    
             #region 解析Svg文件中的viewBox值
    
             string xml = sdoc.ToString();
             string beginStr = "viewBox=";
             string endStr = "\" ";
             int begin = xml.IndexOf(beginStr);
             if (begin > 0)
             {
                 begin = begin + beginStr.Length;
                 int end = xml.IndexOf(endStr, begin);
                 string viewBox = xml.Substring(begin, end - begin);
                 viewBox = viewBox.Replace("\"", String.Empty).Replace("'", String.Empty);
                 if (!String.IsNullOrEmpty(viewBox))
                 {
                     string[] vbs = viewBox.Split(new char[] { ' ' });
                     if (vbs.Length == 4)
                     {
                         float vbx = 0.0f;
                         float vby = 0.0f;
                         float vbw = 0.0f;
                         float vbh = 0.0f;
                         float.TryParse(vbs[0], out vbx);
                         float.TryParse(vbs[1], out vby);
                         float.TryParse(vbs[2], out vbw);
                         float.TryParse(vbs[3], out vbh);
                         sdoc.ViewBox = new SvgViewBox(vbx, vby, vbw, vbh);
                     }
                 }
             }
    
             #endregion
    
             sdoc.Width = width;
             sdoc.Height = height;
             Bitmap bitmap = sdoc.Draw();
             using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
             {
                 bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);                    //把svg按照指定宽度和高度转为png后放入内存流中
                 imgResult = Image.FromStream(ms);
                 //bitmap.Save("e:\\test.png", System.Drawing.Imaging.ImageFormat.Png);      //保存png图片至磁盘
             }
         }
         return imgResult;
     }
    

    8、运行效果如下图:
    在这里插入图片描述

    结束语

    使用svg矢量图的目的是不失真,因此我的程序是根据PictureBox控件的大小生成对应的Image对象的。当然也可以生成png格式的图片。(代码中有一行注释的就是生成png图片)

    展开全文
  • 一、使用到图片标签的src属性上时 1.分离引入方式 在文件头部引入: import logo from '../img/logo.svg'; ...在reder函数中使用 ...二、作为背景图片使用时 1.分离引入方式 在文件头部引入: import

    一、使用到图片标签的src属性上时

    1.分离引入方式

    在文件头部引入:

    import logo from '../img/logo.svg';
    

    在reder函数中使用

    <img src={logo}  alt="图标"/>

    2.通过require懒加载引入

    在reder函数中使用

    <img src={require("../img/logo2.jpg")} alt="图标"/>

    二、作为背景图片使用时

    1.分离引入方式

    在文件头部引入:

    import logo from '../img/logo.svg';
    

    在reder函数中使用:

    let bgc={"height":"400PX","width":"400px","backgroundImage":"URL(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=318050910,1598130082&fm=26&gp=0.jpg)"}
    
    <div style={bgc}>hello</div>

    ps: 背景图片在使用时要加上宽高才能显示

    2.通过require懒加载引入

    在reder函数中使用

    <div style={{backgroundImage:`URL(${require("../img/logo2.jpg")})`,width:"200px",height:"200px"}}>懒加载背景</div>

     

    展开全文
  • 封装svg组件

    2019-06-05 10:39:26
    封装svg图标组件的方法有很多种,如果只是单纯的想使用svg图标,可以将svg导出fonts字体图标使用,但这样做会失去svg原有的样式与尺寸,也可以当成img图片或者背景引入,但这样做非常繁琐。 最近项目中需要用大量的...
  • 1.img标签引入chrome显示不全问题(有时会显示完整);IE,火狐,safari正常移动端缩放文字比例失调问题处理:svg...使用css作为背景图片div{background:url("picture.svg") no-repeat center top;background-size:co...
  • 使用svg的几种方式

    2016-09-26 20:27:00
    -- 图片背景,框架引入svg文件 --> <img src="test.svg" alt=""> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ...
  • ,也可以是通过CSS背景生成的图片,也可以是SVG <image>。选择正确的技术很重要,并且可以在性能和可访问性方面发挥巨大作用。 在这篇文章中,我们除了提到各种包含图片的方法外,还将了解到每种方法的优点和...
  • 19/10/14今日工事.svg

    2019-10-14 14:57:24
    1. javafx将svg文件导入HTML ...2. 作为图片通过img标签引进,或者当做背景图片在CSS中通过url引入。对于这种情况,SVG只是单纯的当做图片来使用而且一个XML类型的文档,无法使用JavaScript来操作它们。 ...
  • SVG有多种方式引入到Html中图片引入<img src="xx.svg">css背景引用<div style="background:url(./xx.svg.png)"></div>svg标签输出<svg xhml="http://www.w3cshoool.org/2000/svg"></svg&...
  • 通过css改变svg img的颜色

    千次阅读 2019-01-08 20:20:00
    需求如下图,hover的时候改变图标颜色,图标为引入svg img 一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景? 但是为了更小的开销,一般css为更...
  • 结论 在我多番测试之后,才发现background-image...在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到解释,CSS选择器必须选择到DOM元素,而svg却被做成背景图,并没有以元素引入,所以在外部也就设不...
  • vue-cli3 svg组件封装

    2020-01-03 17:12:01
    背景 项目当中使用icon应该是很多的,比如说菜单的图标等等,其实方法有很多,我们可以使用字体图标,我们可以使用png图片等,但是他们都有弊端,我们一般都会结合阿里图标库。 一.使用字体图标,png的弊端 字体...
  • background一般用法都知道,后面跟url引入背景图片/svg/base64图片,或者跟16进制色值,很少人去关注它最初的属性,以至于被忽略了一些更好玩的用法,...
  • 我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。使用CSS3是最为简单和高效的方法,并且代码容易调试和维护。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单。
  • 本文首发于yoowin.me,欢迎访问! web开发中,三角形的日常应用,以三角形指示箭头最为常见,其用CSS来实现非常简单,熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 而三角箭头一...
  • 需求如下图,hover的时候改变图标颜色,图标为引入svg img一般的解决办法有:1.字体图标改变css的color属性;2.js在hover事件中切换图片;3.老一点的方案是hover切换背景?但是为了更小的开销,一般css为更好的...
  • web开发中,三角形的日常应用,以三角形指示箭头最为常见,其用CSS来实现非常简单,熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 而三角箭头一般而言,又分为两种,一种是视觉上没有边框的,我们叫做...
  • CSS画三角形

    2017-10-13 17:18:56
    RT,在实际生产开发中,经常会遇到CSS画三角形需求,熟悉了之后相比于引入SVG或是背景图片会是更好更灵活的选择。 CSS画三角形,包括两种需求: 实心三角形 空心三角形三角形入门知识 有谁能详细讲一下css如何画出...
  • 我们能够使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果。因此使用图片实现五角星已经毫无必要(图片...
  • 引入包composer require simplesoftwareio/simple-qrcode 基本使用$content = 'your_content'; // 默认返回svg格式 Qrcode::generate($content); // 图片格式; 大小; 颜色; 背景 QrCode::format('png')->...
  • 引入图片背景 react: import logo from './logo.svg'; ... <img src={logo} className="App-logo" alt="logo" /> vue: <img :src="logo" className="App-logo" alt="logo" /> <div v-bind:style=...
  • 之前在网页中看到很多类似标签的效果,第一反应就是,这肯定是图片背景铺成的嘛,顶多使用svg 后来仔细看了下代码才发现,html中仅仅是一个a标签而已,其他的都在CSS中实现 并且没有使用任何图片之类的东东,...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

背景图片引入svg