![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
svg
文章平均质量分 95
gqkmiss
前端
展开
-
使用fabric.js开发图片编辑器所遇到的问题合集
一、选中多个模块组合与拆分组1、组合组合是要把选中的模块组合成一个组选中的模块:card.getActiveObject()成组:// 成组 、重新渲染card.getActiveObject().toGroup()card.renderAll()2、拆分组合// 获取选中的组合模块,进行组合拆分、重新渲染card.getActiveObject().toActiveSelection();card.renderAll()二、loadSVGFromString 加载 SVG原创 2020-12-23 17:57:01 · 3742 阅读 · 0 评论 -
fabric.js loadSVGFromString Uncaught TypeError: Cannot set property ‘crossOrigin‘ of undefined
fabric.js loadSVGFromString Uncaught TypeError: Cannot set property ‘crossOrigin’ of undefined在 fabric.js 的项目中,使用 canvas.toSVG() 生成的 SVG 代码,在通过 loadSVGFromString 来进行渲染,报错错误内容fabric.js:4477 Uncaught TypeError: Cannot set property 'crossOrigin' of undefi原创 2020-11-17 14:04:13 · 645 阅读 · 0 评论 -
fabric.js 中 loadSVGFromString 加载 SVG 导致位置不对
loadSVGFromString 加载 SVG 导致子元素left和top值不对问题:通过 loadSVGFromString 加载 SVG ,渲染完成之后回导致 里面的子模块 left 和 top 的值不正确原因:这个是因为,通过 loadSVGFromString 加载的 SVG 回被组成一个组合,组合里面的子元素按照组合的基点来算 left 和 top 值,而组合的基点所在位置是中心点,不是我们通常的canvas的顶点位置所以可以先进行组合、在进行组合拆分const card = new f原创 2020-11-17 11:33:42 · 2118 阅读 · 1 评论 -
SVG viewBox属性和preserveAspectRatio属性
SVG viewBox属性和preserveAspectRatio属性viewBox属性viewBox属性允许指定一个给定的一组图形伸展以适应特定的容器元素。viewBox属性的值是一个包含4个参数的列表 min-x, min-y, width and height, 以空格或者逗号分隔开。简单的来讲,就是用viewBox属性的四个值所组成的区域,铺满整个svg元素。通俗的说就是在电脑背景上剪切一块当一个新的背景不加 viewBox时的元素<svg width="200" heigh原创 2020-09-28 14:55:11 · 1655 阅读 · 0 评论 -
svg渐变 线性渐变和径向渐变
一、linearGradient 线性渐变SVG 渐变必须在 标签中进行定义。线性渐变可被定义为水平、垂直或角形的渐变:当 y1 和 y2 相等,而 x1 和 x2 不同时,可创建水平渐变当 x1 和 x2 相等,而 y1 和 y2 不同时,可创建垂直渐变当 x1 和 x2 不同,且 y1 和 y2 不同时,可创建角形渐变属性<linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称fill:url(#orange_red) 属性把 ellipse 元原创 2020-09-27 17:43:27 · 570 阅读 · 0 评论 -
SVG 标签
一、rect 矩形属性rect 元素的 width 和 height 属性可定义矩形的高度和宽度style 属性用来定义 CSS 属性CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)CSS 的 stroke-width 属性定义矩形边框的宽度CSS 的 stroke 属性定义矩形边框的颜色x 属性定义矩形的左侧位置(例如,x=“0” 定义矩形到浏览器窗口左侧的距离是 0px)y 属性定义矩形的顶端位置(例如,y=“0” 定义矩形到浏览器窗口顶端的距离是 0p原创 2020-09-27 14:31:01 · 5461 阅读 · 0 评论