SVG
关注
分享
扫一扫
文章平均质量分 94
福州司马懿
大家如果觉得文章有帮助，给我个关注。谢谢大家 (+_+)，失业了球介绍工作
展开
-
SVG 复用（defs、symbol、use）
<defs>与<symbol>的相同点<defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。<symbol>元素用于定义可重复使用的符号。嵌入在<defs>或<symbol>元素中的图形是不会被直接显示的，除非你使用<use>元素来引用它。<defs>与<symbol>的不同点xlink定义了一套标准的在 XML 文档中创建超级链接的方法，可以用它来引用<symbol>元素或<原创 2016-11-27 15:03:04 · 18173 阅读 · 2 评论 -
JavaScript SVG分叉树
<!-- <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 --><!-- 下面这个是HTML5标志 --><!DOCTYPE html><html> <head> <meta charset="utf8" /> <title>SVG Fractal Tree</title>原创 2017-01-15 13:51:50 · 3348 阅读 · 6 评论 -
SVG 动画（animate、animateTransform、animateMotion）
参考 MDN开发文档 https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMILSMIL As of Chrome 45.0, SMIL animations are deprecated in favor of CSS animations and Web animations. Gecko 2.0翻译 2016-12-09 10:20:27 · 39337 阅读 · 0 评论 -
SVG 滤镜（filter）
SVG 滤镜原语（filter primitive）feBlendfeColorMatrixfeComponentTransferfeCompositefeConvolveMatrixfeDiffuseLightingfeDisplacementMapfeFloodfeGaussianBlurfeImagefeMergefeMorphologyfeOffsetfeSpec原创 2016-11-27 14:21:34 · 13870 阅读 · 3 评论 -
SVG 文本（text）
<text>属性介绍（x，y）是文本左下角的坐标dx（dx1，……）是文本相对基点x向右偏移的距离dy（dy1，……）是文本相对基点y向下偏移的距离text-anchor文本相对基点（x，y）的位置 start 文字在基点的右上方middle 文字在基点的正上方end 文字在基点的左上方textLength 文本长度lengthAdjust 调整文本的收缩或扩张方式，与textLe原创 2016-11-26 20:34:57 · 14741 阅读 · 0 评论 -
SVG 分支（switch）
<switch>简介<switch>的典型用法是用于显示不同的文字，但不可以用它来显示不同的图形。 MDN开发文档 https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch The SVG element evaluates the requiredFeatures, requiredExtensions and原创 2016-11-27 15:20:51 · 1866 阅读 · 0 评论 -
SVG 渐变（linearGradient、radialGradient）
渐变简介渐变是一种从一种颜色到另一种颜色的平滑过渡。 在SVG中，有两种主要的渐变类型：线性渐变（linearGradient）放射性渐变（radialGradient）SVG中的渐变不仅可以用于填充图形元素，还可以填充文本元素。linearGradient（线性渐变）（x1，y1）到（x2，y2）的连线是线性渐变的径向。渐变径向起点之前的为最小offset的stop-color的纯色。原创 2016-12-01 00:04:39 · 14167 阅读 · 0 评论 -
SVG 剪裁与蒙版（clipPath & mask）
<clipPath>简介参考MDN https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath The SVG element defines a clipping path. A clipping path is used/referenced using the clip-path property. The原创 2016-12-08 17:16:06 · 4753 阅读 · 1 评论 -
SVG 入门 及 嵌入HTML的7种方式
SVG简介SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。SVG与其他图像格式相比，SVG的优势在于SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放原创 2016-11-25 09:08:04 · 33314 阅读 · 0 评论 -
SVG viewport、viewBox、preserveAspectRatio
转自 http://www.w3cplus.com/html5/svg-coordinate-systems.htmlSVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport， viewB转载 2016-12-09 14:21:02 · 3101 阅读 · 0 评论 -
SVG 作品搜集（持续更新中）
（1-12）搜集自 http://www.php100.com/html/it/mobile/2014/0530/6925.html1、HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷这次我们要分享的这款HTML5动画简直就是逆天，利用SVG制作的3D蝴蝶飞舞动画，蝴蝶飞舞动画非常逼真，蝴蝶飞舞的路线是利用SVG构造的。另外，动画使用了一张立体感很强的天空背景图，让蝴蝶飞舞时更加显得立体逼真。在线演示原创 2016-11-26 19:22:38 · 3850 阅读 · 0 评论 -
SVG 边框（stroke）
<stroke>属性介绍stroke 边框（轮廓）颜色stroke-width 边框（轮廓）厚度stroke-linecap 开放路径的终结样式（或称为画笔线帽） butt 无线帽round 圆形的线帽square 方形的线帽stroke-dasharray 定义一实线虚线长度数组，不断重复该样式strokestroke指的是边框（轮廓）的颜色<svg xmlns="http://w原创 2016-11-27 13:42:41 · 8883 阅读 · 0 评论 -
SVG fill-opacity、stroke-opacity与opacity同时设置时的冲突
fill-opacity、stroke-opacity与opacity的作用<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"> <circle cx="80" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;"/> <circle原创 2016-11-26 15:53:49 · 12077 阅读 · 0 评论 -
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
SVG有一些预定义的形状元素矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>路径 <path>矩形 <rect><rect> 用于创建 矩形 和 圆角矩形（x，y）是矩形左上角坐标，默认是（0，0）（width，height）是矩形的宽度和高度（rx，ry）是矩形圆角的水平半径和垂直半径<s原创 2016-11-25 13:41:57 · 12986 阅读 · 0 评论 -
SVG 粘滞融合效果
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;style&amp;gt;.svg-composite { filter: url(&quot;#composite1&quot;);}.ball { borde原创 2019-01-19 17:02:00 · 1590 阅读 · 2 评论