SVG如何做圆形图片
SVG如何做圆形图片
2016年5月31日17:30:48
提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形。
原图:
效果:
方法一(SVG原生方法):
<svg width="304" height="223">
<desc>SVG圆角效果</desc>
<defs>
<pattern id="raduisImage" patternUnits="userSpaceOnUse" width="304" height="223">
<image xlink:href="a.jpg" x="0" y="0" width="304" height="223" />
</pattern>
</defs>
<!-- 方形使用下面这个 -->
<!--<rect x="0" y="0" width="304" height="223" rx="128" ry="95" fill="url(#raduisImage)"></rect>-->
<!-- 圆形使用下面这个 -->
<circle cx="128" cy="100" r="100" fill="url(#raduisImage)"></circle>
</svg>
方法二(借助snap.svg):
方法二:
<svg width="304" height="223">
<desc>SVG圆角效果</desc>
<defs>
<pattern id="raduisImage" patternUnits="userSpaceOnUse" width="304" height="223">
<image xlink:href="a.jpg" x="0" y="0" width="304" height="223" />
</pattern>
</defs>
<circle cx="125" cy="100" r="100" fill="url(#raduisImage)"></circle>
</svg>
第二种方法生成的代码与第一种是非常类似的。只是换了种写法而已
SVG如何做圆形图片的更多相关文章
- php给图片添加圆角并且保持透明,可做圆形头像
原文链接:https://www.zhaokeli.com/article/8031.html 给图片添加圆角, 用到的主要的(判断一个点是否在圆内)的公式在上面所说的生成圆形图片文章中. 然后扫 ...
- iOS常见用户头像的圆形图片裁剪常见的几种方法
在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...
- iOS开发——图形编程Swift篇&CAShapeLayer实现圆形图片加载动画
CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形 ...
- Android imageview显示圆形图片
需要ImageView显示圆形图片做法如下 public static Bitmap toRoundCorner(Bitmap bitmap, float ratio) { System.out.pr ...
- 使用CAShapeLayer来实现圆形图片加载动画[译]
原文链接 : How To Implement A Circular Image Loader Animation with CAShapeLayer 原文作者 : Rounak Jain 译文出自 ...
- 【WinRT】【译】【加工】在 XAML 中制作圆形图片
原文:[WinRT][译][加工]在 XAML 中制作圆形图片 原文地址:http://timheuer.com/blog/archive/2015/05/06/making-circular-ima ...
- android绘制圆形图片的两种方式
看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...
- Glide实现圆角和圆形图片
实现圆形图片 , 传参第一个为上下文, 第二个为角度 package com.hh.beauter.util; import android.content.Context; import andro ...
- Android实现圆形图片
情景再现: 写Android程序也有一段时间了,今天突然被问怎么实现一个圆形图片,很多app图像是圆形的.但是用户上传的图像可不是圆的,所以问题就来了,需要我们代码实现圆形图片.但是大脑飞转想到第三 ...
随机推荐
- 文件系统:ext4,zfs测评结果
测试环境 操作系统:ubuntu16.04 内核版本: 磁盘: 本人使用的是青云的云主机,磁盘使用的其性能型: Cpu信息: 4核 2399MHz 内存:8G 文件系统: 本人使用的是ubuntu16 ...
- 数据库笔试面试题库(Oracle、MySQL等)
数据库笔试面试题库(Oracle.MySQL等) 版权声明:版权所有,欢迎分享本文,转载请保留出处,否则追究法律责任,谢谢合作. 注:本文将持续更新,可关注作者微信公众号以便获得最新笔试面试资料. ⊙ ...
- MySQL学习分享-->日期时间类型
日期时间类型 ①如果要用来表示年月日时分秒,一般使用datetime类型: ②如果要用来表示年月日,一般使用date类型: ③如果要表示时分秒,一般使用time类型: ④如果只是表示年份,一般使用ye ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
- abstract和interface的区别
abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制,正是由于这两种机制的存在,才赋予了Java强大的面向对象能力. abstract class和inte ...
- 【2017-03-16】TSQL基本编程、存储过程、触发器
一.TSQL基本编程 1.定义变量 :declare @变量名 数据类型 变量名前面必须加"@"符号 declare @aaa int; declare @bbb n ...
- Mybatis的@Options注解
mybatis的@Options注解能够设置缓存时间,能够为对象生成自增的key 第一个使用场景: 有一个表 CREATE TABLE instance ( instance_id BIGINT UN ...
- 【Unity优化】如何实现Unity编辑器中的协程
Unity编辑器中何时需要协程 当我们定制Unity编辑器的时候,往往需要启动额外的协程或者线程进行处理.比如当执行一些界面更新的时候,需要大量计算,如果用户在不断修正一个参数,比如从1变化到2,这种 ...
- 如何使用bootstrap
前言: 前几天,本想做一个登陆界面,但自己写form表单必然很丑,所以想用下bootstarp框架,之前听别人说bootstrap很牛的样子.但我完全不会bootstrap... 下载&目录 ...
- 关于RestfulAPI与SpringMVC之间的传值
##默认读者已经搭建好的SpringMVC的环境,并且对SpringMVC有着一定的了解,并且已经对RestfulAPI有了一定的了解 1,首先将WEB-INF下的web.xml里面的url-part ...