SVG图标修改图标方向，镜像旋转和颜色等

已于 2023-01-20 15:30:49 修改
阅读量3.9k 收藏 3
点赞数 2
分类专栏： UI设计 文章标签： android 开源 音视频
于 2022-12-27 11:26:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenhuakang/article/details/98868042
版权 
<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292"/></svg>

 增加旋转角度  style="transform: rotate(90deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotate(90deg)">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292"/></svg>

 任意角度都可以修改

svg修改颜色值

设置颜色值代码  style="stroke:#660000; fill:none;"

<svg xmlns="http://www.w3.org/2000/svg"
 class="ionicon" 
viewBox="0 0 512 512">
<title>Arrow Back</title>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="48" 
d="M244 400L100 256l144-144M120 256h292" 
style="stroke:#660000; 
fill:none;"/></svg>

以下为镜像翻转

原图

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor"
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" 
d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

水平镜像翻转后 style="transform: rotateY(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateY(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

上下镜像翻转后 style="transform: rotateX(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateX(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" 
d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

 

水平上下同事镜像翻转  style="transform: rotateX(180deg) rotateY(180deg)"

<svg xmlns="http://www.w3.org/2000/svg" 
class="ionicon" 
viewBox="0 0 512 512" 
style="transform: rotateX(180deg) rotateY(180deg)">
<title>Alarm</title>
<path d="M416.07 272a160 160 0 10-160 160 160 160 0 00160-160zM142.12 91.21A46.67 46.67 0 00112 80l-2.79.08C83.66 81.62 64 104 64.07 131c0 13.21 4.66 19.37 10.88 27.23a4.55 4.55 0 003.24 1.77h.88a3.23 3.23 0 002.54-1.31L142.38 99a5.38 5.38 0 001.55-4 5.26 5.26 0 00-1.81-3.79zM369.88 91.21A46.67 46.67 0 01400 80l2.79.08C428.34 81.62 448 104 447.93 131c0 13.21-4.66 19.37-10.88 27.23a4.55 4.55 0 01-3.24 1.76h-.88a3.23 3.23 0 01-2.54-1.31L369.62 99a5.38 5.38 0 01-1.55-4 5.26 5.26 0 011.81-3.79z" fill="none" stroke="currentColor" stroke-miterlimit="10" 
stroke-width="32"/>
<path fill="none" 
stroke="currentColor" 
stroke-linecap="round" 
stroke-linejoin="round" 
stroke-width="32" d="M256.07 160v112h-80M416.07 432l-40-40M96.07 432l40-40"/></svg>

 

 对SVG修改有问题可以关注留言

chenhuakang
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Android应用开发之PNG、IconFont、SVG图标资源优化详解
sa3221sa的博客
01-20 623
======== 最近因为一些个人私事导致好久没写博客了，多事之年总算要过去了，突然没了动力，所以赶紧先拿个最近项目中重构的一个小知识点充下数，老题重谈。 在我们App开发中大家可能都会有过如下痛疾（程序员和设计妹妹注意喽）： 好多小的图标好烦人，又占体积还要考虑分辨率，一拉伸就模糊等。 同一个图标不同状态还有不同颜色的多张。 总是幻想IOS、Android、Web等对于一个图标只切一次图多好。 如果你有过类似的痛疾那么下面讨论的故事就是一个完美的解决方案，当然了，采用下面方案对于重型应用或
SVG 静态文件使用 ,以及如何简单修改SVG 常见样式(填充颜色、描边等)。
youyudehan的博客
05-31 1951
简单封装 SVG 组件，在页面通过该组件展示SVG 图形，避免SVG内容过多，导致页面不美观，同时简单修改svg 样式，提供 hover 、点击等方法对SVG样式修改思路。
svg-path-reverse:这是“ something”转换器JavaScript SVG路径，将路径转换为可挂钩的图形指令以进行任意转换
04-28
SVG路径反转库 这是一个简单的SVG路径逆转库，具有非常简单的API。 安装 使用npm安装： $> npm install svg-path-reverse 使用图书馆 这是一个通用库，您可以通过require.js，UMD，commonjs，浏览器等方式加载它，不管它是什么。 您可能知道如何使用选择使用的技术。 一旦将其装入，则可能是这样，API如下所示： var utils = ... // load however you know to load libraries var reverse = utils.reverse, normalize = utils.normalize; var path ="m0 0l10 0 0 10 -10 0z"; var normalized = normalize(path); var reversed = reverse(pa
jpg、png、svg、gif几种图片比较
Sunshine的博客
01-04 2425
JPEG JPEG格式：也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比(可达到2:1甚至40:1)，因为JPEG格式的文件尺寸较小，下载速度快,所以是互联网上最广泛使用的格式! 注： jpg是jpeg的简称。 GIF GIF格式：最大的特点是不仅可以是一张静止的图片,也可以是动画，并且支持透明背景图像，适用于多种操作系统，“体型”很...
svg vector 翻转_SVG地图翻转
CSS 初学者指南
07-09 326
假设您有一张世界地图，并且希望能够在光标悬停在国家（或州，县等）上或点击它时突出显示该国家（或州，县等）。 可行！ 首先，地图可能应该是矢量。 SVG在这里几乎可以肯定是正确的图像格式选择。 它可以为我们提供一张看起来合理且大小合适的清晰地图，最重要的是，它可以为我们提供所需的交互性和简单的样式。 让我们以美国的州地图为例。 Wikipedia有一个完美的供我们使用。 让我们下...
CDH6.2.0 修改logo.svg
weixin_44155237的博客
12-09 647
1.修改cloudera manager的logo，只需替换logo文件 路径：/opt/cloudera/cm/webapp/static/cms/img/logo.svg 注：logo.svg需要自己设计logo样式，生成svg文件。 2.修改logo下的提示文字 路径：/opt/cloudera/cm/message_zh_CN.properties label_zh_CN.p...
修改svg格式的图片
负数
08-15 3652
1、fill 填充颜色 　　2、stork 描边颜色 　　3、stork-width 描边粗细 　　4、transform 变形，位移（相较于父亲）等 　　5、opacity 透明度 　　6、 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） 　　7、 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） svg 图片...
线条风格图标集 .ai素材下载
04-20
在Adobe Illustrator中，你可以对这些线条图标进行各种编辑，包括但不限于改变颜色、调整线条粗细、修改形状、添加渐变或图案填充等。这使得该素材集非常灵活，能满足不同设计项目的需求。图标集通常包含一系列相关...
SVG格式定义的电力图元/电力图符
09-05
在电力图元设计时，考虑到图元可能需要在不同方向和位置使用，为了保持图示的简洁和美观，通常会定义基础图元，然后通过旋转、镜像等几何变换来生成其他方向的图元。这种方法可以避免重复绘制，提高效率，并确保所有...
SVG中以任意直线为对称轴的镜像变换及其矩阵
897371388
09-23 1880
直线一般方程为 A x + B y + C = 0 则以该直线为对称轴，做镜像变换的矩阵为： 任意点P(x,y)变换后的新坐标Q(x',y')的坐标为： SVG中的直线通常是以坐标轴形式或者是两点形式表示的。 如果是以两点线段形式表示的，需要先求出直线方程的系数。 两点(x1,y1),(x2,y2)确定的直线方程为：(y1-y2)*x + (x2-x1)*y + (x1*y2...
基于winform的SVG编辑器
11-06
SVG的矢量绘图程序，基于SVG库，Draw库构成的，可以直接在VS2015下进行编译，很适合在上面做二次开发，里面的程序框架设计的很好，类之间的调用基本全是通过事件委托的形式构成的，可以修改成支持dxf和svg的一个比较好的绘图软件，也可以做成工业绘图类的CAM软件。
SVG源码修改指南
xxhls的博客
03-03 1795
本文适用于对svg源码零基础，想要快速掌握对现有的svg进行修改的能力
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
icemwj的博客
07-14 2742
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
判断SVG旋转方向，比向量三角判断法更优。
qq_42192688的博客
11-08 154
向量三角法在某些特殊情况会判断出错，取决于你截取三角形的准确性。 以下方法能够更正确简单的判断svg旋转方向。 /** * 判断svg形状是否顺时针 * @param poly [[x,y],[x,y],...] * return true:顺时针，false:逆时针，0:unknown */ function isClockwise(poly) { if (!poly || poly.length < 3) return 0 let end = poly.length - 1
图标.svg html怎么换颜色,如何改变SVG图像的颜色使用CSS(jQuery SVG图像替换)？
weixin_36077932的博客
06-04 490
首先，在HTML中使用IMG标记嵌入SVG图形。我使用Adobe Illustrator来制作图形。 这就像你如何嵌入一个正常的图像。注意，您需要将IMG设置为具有svg的类。 “社交链接”类仅仅是为了例子。 ID不是必需的，但是很有用。然后使用这个jQuery代码(在一个单独的文件或内联在HEAD)。/** Replace all SVG images with inline SVG*/jQu...
一款可以编辑SVG矢量图形的方法（以桑基图为例）
最新发布
jerry003的博客
07-01 469
一款可以绘制桑基图的在线绘图网站
d3 翻转，移动，放大svg文件，
weixin_42390878的博客
01-04 937
可以通过transform，matrix 方法翻转svg图像 移动，放大，使用zoom
设计师都在找的在线SVG编辑工具！赶快收藏
sky768872的博客
07-07 653
即时设计是一款非常值得体验的在线SVG编辑工具，它多种功能均支持设计师免费使用
CSS动态修改SVG图标颜色
05-25
可以使用CSS的`fill`属性来修改SVG图标的颜色。具体步骤如下： 1. 在HTML中将SVG图标插入到页面中： ```html <svg class="icon" viewBox="0 0 512 512"> <path d="M256 0C114.844 0 0 114.844 0 256s114.844 256 256 256 256-114.844 256-256S397.156 0 256 0zm0 480c-119.297 0-224-94.703-224-224S136.703 32 256 32s224 94.703 224 224-94.703 224-224 224z"></path> </svg> ``` 2. 添加CSS样式，使用`fill`属性修改图标颜色： ```css .icon { fill: #000; /* 默认黑色 */ } .icon:hover { fill: #ff0000; /* 鼠标悬停时红色 */ } ``` 注意：有些SVG图标可能没有填充（fill）属性，只有描边（stroke）属性，此时可以使用`stroke`属性来修改描边颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chenhuakang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值