SVG主题的文章列表，还有SVG的技术要点_第2页

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片，到后来的使用css sprite来减少服务器请求，再到流行的图形字体化图标Iconfont。现在，一种全新的图标使用方式开始流行了起来——SVGsymbols图标。 SVGsymbols的工作原理：symbol元素用来定义一个图形模板对象，它可以用一个use元素实例化。sy...

代码星球 ·2020-12-24

SVG入门指南

SVG，即可缩放矢量图形(ScalableVectorGraphics)，是一种XML应用，可以以一种简洁、可移植的形式表示图形信息。目前，人们对SVG越来越感兴趣。大多数现代浏览器都能显示SVG图形，并且大多数矢量绘图软件都能导出SVG图形。SVG主要可以概括为以下几点：SVG指可伸缩矢量图形SVG用来定义网络的基于...

代码星球 ·2020-12-24

阿里巴巴iconfont svg图标不能更改颜色的解决方法

代码引用阿里巴巴iconfontsvg图标时发现，设置颜色后，有一部分图标还是显示原始的颜色。原来这部分svg图标带有fill属性，这种图标不能本地修改fill属性，需要在项目中移除默认颜色。svg图标带有fill属性，如果选择的是多色图标且下载到本地的话，默认是带有颜色的。修改的话，需要在编译器里面打开svg&nbs...

代码星球 ·2020-12-24

SVG素材整理（原）

whySVG?1.矢量的国际图形标准，以后随着浏览器的发展，相信矢量会更多的出现2.illustartor等多数矢量绘图软件可以导出为这种格式soSVG现状基本介绍：http://zh.wikipedia.org/wiki/%E5%8F%AF%E7%B8%AE%E6%94%BE%E5%90%91...

代码星球 ·2020-10-01

JPG、PNG、GIF、SVG 等格式图片区别

1.图片 2. 前言首先，我们要清楚的是，图片从类型上分，可以分为位图和矢量图。位图：位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息。因为这些点是离散的，类似于点阵，同时因为多个像素的色彩组合就形成了图片，所以叫这种图为点阵图或...

代码星球 ·2020-09-12

Firefox SVG getBBox方法返回'NS_ERROR_FAILURE'错误分析

　　在SVG中，我们无法给Text元素设置Width和Height属性，因此无法直接获取Text元素的高和宽。如果想要给Text元素添加背景色，最简单的办法就是在Text元素的下面添加Rect，然后给Rect设置fill属性。如下面的代码：<rectid="dateRectObj_0"x="1133"y="605...

代码星球 ·2020-09-04

解决IIS Web部署 svg/woff/woff2字体找不到问题(vue部署后找不到)

代码星球 ·2020-09-02

SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png

　　在项目中用到了amcharts，amcharts图标统计插件是利用SVG实现的，其自带下载png功能，但是不支持IE以下浏览器。因此研究了SVG转换为png，最终实现的效果是将amcharts生成一张png写入一个excel并提供下载。(只支持IE9以上)SVG意为可缩放矢量图形（ScalableVectorGra...

代码星球 ·2020-08-27

vue中，svg图标的click事件不生效

问题情况：vue项目中，使用svg图标，为svg图标绑定click事件，部分浏览器中点击没有反应，代码如下：<iconname="icon_add"@click="addSubject(scope.$index)"></icon>原因：在edge内核中只有点击svg边缘部分才会触发click事件...

代码星球 ·2020-08-16

d3.svg.line()错误：TypeError: d3.svg.line is not a function

varline_generator=d3.svg.line().x(function(d,i){returni;}).y(function(d){returnd;})　　错误：TypeError:d3.svg.lineisnotafunction原因：　　你使用D3 v4 。从版本4开始，没有d3....

代码星球 ·2020-08-09

SVG学习笔录（二）

一、svg动画SMIL SVG采用的是使用文本来定义图形，这种文档结构非常适合于创建动画。要改变图形的位置、大小和颜色，只需要调整相应的属性就可以了。事实上，SVG有为各种事件处理而专门设计的属性，甚至很多还是专门为动画量身定做的。在SVG中，实现动画通常使用SVGSMILanimat...

代码星球 ·2020-07-24

SVG学习笔录（一）

　　SVG可缩放矢量图形（ScalableVectorGraphics）这项技术，现在越来越让大家熟知，在h5的移动端应用使用也越来越广泛了，下面让我分享给大家svg学习的经验。　　HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。一、什么是svg...

代码星球 ·2020-07-24

REM+SVG Sprite，web app案例

REM+SVGSprite，构建新时代webapp<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/ht...

代码星球 ·2020-07-24

require.context实现引用全部js文件或svg文件

1.引用一个目录下的所有js文件modules下home.jsme.jsproductList.jsuser.js实现importhomefrom'./modules/home'importmefrom'./modules/me'importproductListfrom'./modules/productList'i...

代码星球 ·2020-06-29

svg的viewport和viewbox

svg中视区重要的概念1. viewport 视口，相当于显示器屏幕2. viewbox 视区，相当于在屏幕上截取一小块，放大到整个屏幕，就是特写的效果3. preserveAspectRatio 规定viewbox与viewport的对齐方式和缩...

代码星球 ·2020-06-29