【SVG】
神以灵
渴望成为前端大神的一个noob~~~
(https://github.com/shenyiling)
展开
-
【SVG】getBBox方法获取svg text文本元素的宽高
getBBox使用方法和getBoundingClientRect类似,不同的是getBoundingClientRect方法的坐标是相对于视口。getBBox方法返回一个包含svg元素的最小矩形的坐标对象。example:{ x: 50, y: 50, width: 50, height: 50, // __proto__: SVGRect}...原创 2019-06-02 13:59:00 · 5816 阅读 · 2 评论 -
svg之viewBox
viewBox用来干嘛比方说,我用svg画了个半径200px的圆<circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>如果是在一个400*400的画布上,圆正好撑满整个画布,挺好的。好了,然后我要把这个圆嵌入到自己的页面里的svg标签里去,页面的svg标签尺寸是由实际业务需要来定的...转载 2019-06-11 12:40:38 · 874 阅读 · 0 评论 -
SVG蒙版(mask)的基础使用教程
蒙版工作原理设计师或者会用Sketch、Photoshop一类设计工具的朋友应该都了解蒙版(mask)这个东西。接下来我先以Photoshop为例,简单解释蒙版的工作原理。![描述](https://img-blog.csdnimg.cn/20190724175900104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,...转载 2019-07-24 18:03:27 · 3351 阅读 · 0 评论 -
svg滤镜
1.滤镜工作原理SVG阅读器处理一个图形对象时,会将对象呈现在位图输出设备上,它可以将对象的描述信息转化为一组对应的像素。在使用滤镜时,SVG阅读器不会直接将图形渲染为最终结果,而是先将像素保存到临时位图中,然后将滤镜指定的操作应用到该临时位图,其结果作为最终图形。在SVG中,使用filter元素指定一组操作(也叫基元),在渲染图形对象时,将该操作应用在最终图形上。filter标记之间就是我...转载 2019-07-27 11:49:53 · 1340 阅读 · 0 评论