如何在 React.js 中从 fabric.js 渲染 svg 字符串？

Posted 2023-03-25

【中文标题】如何在 React.js 中从 fabric.js 渲染 svg 字符串？

【英文标题】：How to render the svg string from fabric.js in React.js?

【发布时间】：2021-11-13 07:30:42

【问题描述】：

比如我在fabric.Canvas上加了一个圆圈。

对于这个圈子，toJSON() 给了我以下信息：

      type: 'circle',
      version: '4.6.0',
      originX: 'left',
      originY: 'top',
      left: 241.21,
      top: 141.63,
      width: 100,
      height: 100,
      fill: 'blue',
      stroke: null,
      strokeWidth: 0,
      strokeDashArray: null,
      strokeLineCap: 'butt',
      strokeDashOffset: 0,
      strokeLineJoin: 'miter',
      strokeUniform: false,
      strokeMiterLimit: 4,
      scaleX: 1,
      scaleY: 1,
      angle: 0,
      flipX: false,
      flipY: false,
      opacity: 1,
      shadow: null,
      visible: true,
      backgroundColor: '',
      fillRule: 'nonzero',
      paintFirst: 'fill',
      globalCompositeOperation: 'source-over',
      skewX: 0,
      skewY: 0,
      radius: 50,
      startAngle: 0,
      endAngle: 6.283185307179586,
      id: 'CanvasCircle:01FFY0FCHMX0HV285Q85E3C23A'

toSVG() 给出一个像这样的 SVG 字符串：

'<g transform="matrix(1 0 0 1 291.21 191.63)" id="CanvasCircle:01FFY0FCHMX0HV285Q85E3C23A" >\n<circle style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,255); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="50" />\n</g>\n'

我的问题是如何在 React.js 中将此 SVG 字符串呈现为 SVG？

我正在做这样的事情，高度和宽度是这个画布圈的参数：

   <div
      style=
        height,
        width,
        zIndex: 11,
      
      dangerouslySetInnerhtml=
        __html:`<svg   viewBox="0 0 $width $height" >$svgString</svg>`,
      
    />

它在 HTML 中呈现如下

<div style="height: 100px; width: 100px; z-index: 11;"><svg   viewBox="0 0 100 100"><g transform="matrix(1 0 0 1 351.53 205.4)" id="CanvasCircle:01FFY1BD3EQW39JGWJ0AWQ2R1B">

页面上没有显示任何内容，似乎cx 和cy 是错误的？所以他们应该是50，把这个改成50确实给了我SVG？

但是，我最终通过自己渲染 SVG 来解决它，它现在可以工作了，

仍然想知道fabric.js 的做法是什么，或者这个toSVG() 会被破坏？我在这里想念什么？谢谢

【参考方案1】：

问题是组（圆圈）被转换了，可能是因为在画布中位于中间的某个地方。

如果您想让圆形显示在与圆形本身一样大的正方形中，请在导出前将其左侧和顶部更改为 0 和 0。

【讨论】：

感谢您的回答，但我需要 top 和 left 值以便稍后在 div 元素中以相对位置呈现它们。