使用CSS缩小SVG - 腾讯云开发者社区

文章/答案/技术大牛

发布

CSS伪类::before、::after中使用svg图标

之前用的 iconfont.css 可以设置伪类元素的字体为 iconfont ，然后给伪类的 content 属性值定义 iconfnt 的图标标识就能正常显示了。...但是最近精简代码我把 iconfnt.css 移除了，只保留了 iconfnt.js，这样之前 css 中用上面方法引用的图标失效了。...就一个图标，总不能再把那么大的 css 引进来吧，可以不以直接给伪类设置一个 svg 图标呢？...当然是可以的：给CSS伪类设置svg图标有两种方式：设置 content 属性： #test::before { content: url(path/icon.svg); width: 200px...; height: 200px; } 这种有一个问题，不能设置 svg 的颜色和大小，只能通过修改 svg 代码来实现。

2.5K4 0

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形，使用XML格式定义图形，主要优势在于可缩放的同时不会影响图片的质量。...SVG 在html 中常用的方法 1.使用元素来嵌入SVG图像 svg/rect1.svg” width=”300″.../> 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat; 3.使用svg元素...Opera 32+ svg sprites svg sprites类似于css sprites，将各个svg合并在一起。...由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。

3.1K9 0

您找到你想要的搜索结果了吗？

是的

没有找到

css直接引用svg代码

——《我是猫》有些时候我们想直接引入一个svg图标，又不想创建svg文件，或者编写svg代码到html中，想直接在css中引入可以转码+加前缀直接引用，这是一段svg代码 svg: first layer --> svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> svg: first layer --> svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> `; `url("data:image/svg+xml,${svg.replace(/[\r\n%#()?...[\\\]^`{|}]/g,encodeURIComponent)}")` 得到的地址，我们放入background中：效果很棒思路来源： https://css-tricks.com/grainy-gradients

2.3K2 0

css实现鼠标划过图片放大或缩小

这个简单的说下，我们还是说说关于图片加载动画的问题；此效果主要是依靠css3的transition属性和transform属性；我们先上代码，然后说原理，希望大家懂得原理，而不是照搬。 <!...定义和用法：transition 属性是一个简写属性，用于设置四个过渡属性： transition-property：规定设置过渡效果的 CSS 属性的名称 transition-duration：规定完成过渡效果需要多少秒或毫秒...matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。...matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。

5.1K1 0

Vue | 使用 SVG sprite loader 来引入 svg

// } // } } // 这个样式代码是阿里矢量字体库里面给的css...都会自动变色, 只有一些标签会起作用… 于是我直接干脆调成了这样和这样笑死我了，直接逃避这个问题经过排查发现是 svg 代码里面的 fill 属性来控制了颜色，从而 css 不能从外部更改颜色...如图：手动删掉此属性即可正常用css指定颜色，但是如果有很多svg.这样的话未必太过麻烦我们可以使用一个叫做 svgo-loader 的插件来解决此问题不知道是什么原因，高版本的这个插件会导致加载不出...svg 的 bug，我使用的是以下版本，是正常使用的 // 和上文提到的一样 { "devDependencies": { "svg-sprite-loader": "^6.0.11...", //已知 svg-sprite-loader 的 4.1.6 版本会有 bug // 故推荐使用高版本的，最新版已经修复了 bug，推荐使用 ^6.0.11

4K2 0

css animation配合SVG制作能量流动效果

segmentfault.com/a/1190000039283720 最终效果如下: 动画分成两步制定运行轨迹创建DOM并按照轨迹动画制定运行轨迹我们先要画一条底部的淡蓝色半透明路劲做为能量流动的管道这里用SVG...-- 代码是用react写的, 删除了遍历以及部分代码 --> svg> 创建DOM并按照轨迹动画这里的核心原理通过offset-path这个属性设置运动偏移路径,再通过offset-distance来设置偏移量,这样通过css3 animation就可以让元素按照一定的轨迹运动...-- 这里要保证盒子跟SVG的盒子位置重合,宽高一致,这样路径点才能一致 --> svg内path的d的值进行流动 --> <!

4.7K3 0

使用svgdeveloper 和 svg-edit 绘制svg地图

方法一、SVGDeveloper 打开SVGDeveloper，如果没有激活会提示需要激活，可以咨询激活，或者使用试用版，选择试用30天，点击继续即可 4.1 新建svg文件点击file>new，选择...svg，点击ok 修改svg画布大小，调至和要使用的图片模板一样大小 4.2 插入图片模板点击工具栏上的图片，然后在画布上点击一下，会提示插入图片，选择刚刚处理好的吉林.jpg 修改插入的图片模板的坐标和宽度高度...这里也可以修改文本框内的文字，或者文本框的位置 4.5 添加id属性在代码部分可以看到，路径和文本框内的id，根据区域名修改之后就是逐个抠取各个区域，然后添加文字及id属性所有区域都完成后，把比例缩小到...，可以使用工具栏的x、y和宽度高度来修改 5.2 扣取区域路径为了轮廓更清晰、准确，将图片放大一些；可以通过左下角的放大镜或者鼠标的滚轮来放大缩小图片，同时为了抠图清楚，可以设置线条的颜色为蓝色，宽度为...点击文本框A，然后在合适的位置上点击后输入文字 5.4 修改id属性修改区域和文本框的id 之后就是逐个抠取各个区域，分别给区域加文字，然后给路径和文本框添加id属性所有区域都完成后，把比例缩小到

10.5K5 0

网页中如何使用SVG

将图像作为另一个元素的 CSS 样式属性插入当图像主要用来装饰时，推荐这种方式。...">div> 将SVG作为CSS背景div> 将 SVG 文件作为图像呈现时，无论上述哪种方式，都有一定局限性。...根据浏览器以及用户的安全设置不同，SVG 文件内定义的脚本也可能不会运行，URL #片段也可能被忽略（见上述示例）将SVG作为对象 svg" type="image...与区别： (1) 使用 src 引用源数据文件，而不是 data 属性； (2) 不能包含任何子内容，如果嵌入失败就没有备选项。...svg> div> 将SVG作为CSS背景div> 主文档中的样式会被 SVG 继承；也可以在主样式表内为 SVG 元素定义样式。

2.9K1 0

CSS 3.0结合SVG实现水滴穿透加载动画

给大家分享一个用CSS 3.0结合SVG实现一个水滴穿透加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 CSS 3.0结合SVG...} 100% { left: 0; } } svg...container"> LOADING svg...SourceGraphic" in2="filter" operator="atop" /> svg

1K2 0

css 缩小图片后，图片变模糊的解决办法

问题描述：样式设置图片宽高后，图片缩小变的模糊了。如何解决图片模糊问题？

2.6K1 0

网页中如何使用SVG

对于 SVG，则： ① 如果文件中的根元素 svg> 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 svg>...将图像作为另一个元素的 CSS 样式属性插入当图像主要用来装饰时，推荐这种方式。..."> 将SVG作为CSS背景将 SVG 文件作为图像呈现时，无论上述哪种方式，都有一定局限性。... 与区别： (1) 使用 src 引用源数据文件，而不是 data 属性； (2) 不能包含任何子内容，如果嵌入失败就没有备选项...svg> 将SVG作为CSS背景主文档中的样式会被 SVG 继承；也可以在主样式表内为 SVG 元素定义样式。

2.2K0 0

vue使用svg的简单记录

首先安装 npm install vue2-svg-icon --save-dev "devDependencies": { "vue2-svg-icon": "^1.3.2", } 然后main.js...引入 import Icon from 'vue2-svg-icon/Icon.vue' Vue.component('icon', Icon) 将svg文件（如 history.svg ）放到src/...assets/svg下然后，vue文件引入即可

6231 0

Svg矢量图封装使用

SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。...2、本地上传svg图标挑选 svg 图标下载打开iconfont上传 svg 图标上传的svg图标添加至iconfont 项目 3、symbol 引用官方帮助文档：查看，推荐使用 symbol...因此，您可能需要使用CSS来隐藏这些元素（如果适用）。但是，请注意，仅仅使用CSS隐藏元素并不足以确保它们对辅助技术用户是不可见的。...4、内部引用svg图标收集待使用的svg图标，下载放置项目的src/icons/svg/的文件夹中,如放入一个vuejs_icon.svg图标 5、完成导入所有的svg图标 src/icons/index.js...svg代码(不推荐使用)

1.5K1 0

Vue 使用 vue-svg-icon 插件实现 svg 按需加载

一、svg 在网页中的一般用法 svg 使用 XML 格式定义图像，基本使用如下： svg width="50" height="50" version="1.1" xmlns="...:rgba(0,0,0,1)"/> svg> 二、在 Vue 中使用 svg 可以通过上述的一般用法在 Vue 中直接使用 svg，但既然已经是用 Vue来组件化开发项目了，...例如，将所有绘制 svg 的代码放到 svg-icon.vue 文件中，所有图标的绘制代码使用 symbol 标签分隔开并单独命名，然后将这个文件当做组件导出，在主页面中引入此组件，接着在需要使用 svg...> 这里将整个 vue 组件导出一个大的 svg，此 svg 中包含了许多小图标，类似于精灵图，每个图标使用 symbol 分隔，并单独命名以方便调用。 ...name="pen" scale="1"> 这里可以通过修改 scale 属性值或在使用的页面中修改 svg 样式来调整图标大小

2.9K2 0

win10 uwp 显示SVG win2d 使用 svg

本文说如何显示SVG 本来在我一个白天晚上按钮，使用图片，图片不清晰 ?...因为矢量图格式很多，但是比较容易找到的图很少，所以我们就使用svg，其实png也是，但是他播放模糊。lindexi <!...安装Mntone.SvgForXaml，安装win2d 1.11.0 我们上面那个代码就是svg，我们使用ViewModel绑定，绑定内容是SvgDocument 自然我们需要写一个字符串去转换...> "; Svg=SvgDocument.Parse(str); } 然后我们在我们的界面先使用命名Mntone.SvgForXaml.UI.Xaml.../UWP/tree/master/uwp/src/ScalableVectorGraphic win2d 使用 svg 现在 win2d 支持 svg 1.1 ，直接在 win2d 使用svg请看下面代码

1.6K1 0

Android使用BottomNavigationView以及如何使用SVG图片

SVG图片的使用 iconfont:https://www.iconfont.cn/ 我们经常在iconfont上找图片然后下载下载放在项目里面，为了适配我们还要下载不同尺寸的图片，但是明明iconfont...我们在下载图片的时候，最后有一项复制SVG 我们复制出来的如下 svg t="1586934037521" class="icon" viewBox="0 0 1024 1024" version="...1.1" xmlns="http://www.w3.org/2000/svg" p-id="3927" width="80" height="80"> svg...BottomNavigationView是一个底部导航栏控件，一般和fragment一起使用。

2.3K1 0

CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

Title css...o-transform: rotate(360deg); -ms-transform: rotate(360deg); } /*效果二：放大修改scale(放大缩小的值...仅针对keep-alive组件有效*/ } } /* @import url(); 引入css类 */ header {

4.7K2 0

【说站】css中svg图片无法显示怎么办？

css中svg图片无法显示怎么办？ 1、在保证svg图片可以打开且无损坏的前提下，使用ideal或任意文本编辑工具打开svg图片。...2、使用object对象显示。...mapinfoImg" οnclick="glass(event)" data="http://localhost:8080/mapinfo_chx2/featureDemoSVG" type="image/svg...+xml" width="1200" height="1200" id="mySVGObject"> 以上就是css中svg图片无法显示的处理办法，在做网页开发时，我们通过浏览器进行测试...，发现svg图片不能显示的这类情况，就可以采取本篇所讲的方法进行解决。

4.5K3 0

Vue3 使用 svg-sprite-loader 实现 svg 图标按需加载

前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载...1、将 email.svg 文件导入项目 svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3...> 这里将 svg 图标中对应的图标颜色值改为字符串 currentColor，方便使用时控制图标实时颜色将图标放在特定文件夹下，这里以 @/assets/svg 中导入的 svg 为例 2、安装...= { // 配置使用stylus全局变量 chainWebpack: config => { const svgRule = config.module.rule("svg");.../plugin"; createApp(App) .use(plugin, { imports: [] }) 7、图标组件的使用 <SvgIcon name="email" :size

8.1K3 1

使用SVG做模型贴图的思路

大多数情况下，三维模型使用PNG，JPG作为模型的贴图，当然为了性能优化，有时候也会使用压缩贴图来提高渲染效率和较少GPU压力。...今天提供一种新的思路，使用SVG作为模型的贴图，可以达到动态调整图片精度的效果。使用svg作为贴图的思路，有两种。...其实还有另外一种方式，就是使用canvas绘制svg，同时可以动态的调整绘制时候的缩放比例。由于svg在缩放的时候不会失真，因此可以得到较大尺寸而且又高清的图片。...'; 上面的先使用image对象加载svg图片，然后把svg图片绘制到canvas上面，注意绘制的时候放大的倍数是10....总结使用svg 图片，可以不用做高清的位图，结合canvas绘制，也可以得到高清的纹理贴图效果。

1.2K1 0

点击加载更多

CSS伪类::before、::after中使用svg图标

SVG 使用

css直接引用svg代码

css实现鼠标划过图片放大或缩小

Vue | 使用 SVG sprite loader 来引入 svg

css animation配合SVG制作能量流动效果

使用svgdeveloper 和 svg-edit 绘制svg地图

网页中如何使用SVG

CSS 3.0结合SVG实现水滴穿透加载动画

css 缩小图片后，图片变模糊的解决办法

网页中如何使用SVG

vue使用svg的简单记录

Svg矢量图封装使用

Vue 使用 vue-svg-icon 插件实现 svg 按需加载

win10 uwp 显示SVG win2d 使用 svg

Android使用BottomNavigationView以及如何使用SVG图片

CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动

【说站】css中svg图片无法显示怎么办？

Vue3 使用 svg-sprite-loader 实现 svg 图标按需加载

使用SVG做模型贴图的思路

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐