用SVG.js克隆一个SVG矩形

SVG.js是一个轻量级的JavaScript库，用于操作和创建可缩放矢量图形（Scalable Vector Graphics，SVG）。它提供了一组简单易用的API，使开发者能够轻松地创建、操作和动态更新SVG图形。

要使用SVG.js克隆一个SVG矩形，可以按照以下步骤进行：

引入SVG.js库：在HTML文件中引入SVG.js库的链接地址，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>

创建SVG画布：使用SVG.js的SVG()函数创建一个SVG画布对象，指定画布的宽度和高度，例如：

var draw = SVG().size(500, 500);

创建矩形：使用SVG.js的rect()函数创建一个矩形对象，并设置其属性，例如：

var rect = draw.rect(100, 100).fill('red');

克隆矩形：使用SVG.js的clone()函数克隆矩形对象，例如：

var clonedRect = rect.clone();

设置克隆矩形的位置：使用SVG.js的move()函数设置克隆矩形的位置，例如：

clonedRect.move(200, 200);

将克隆矩形添加到画布：使用SVG.js的add()函数将克隆矩形添加到画布中，例如：

draw.add(clonedRect);

完整的示例代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.1.1/svg.min.js"></script>
</head>
<body>
  <script>
    var draw = SVG().size(500, 500);
    var rect = draw.rect(100, 100).fill('red');
    var clonedRect = rect.clone();
    clonedRect.move(200, 200);
    draw.add(clonedRect);
  </script>
</body>
</html>

这样就使用SVG.js成功克隆了一个SVG矩形，并将克隆矩形添加到了SVG画布中。

推荐的腾讯云相关产品：腾讯云对象存储（COS）

产品介绍链接地址：https://cloud.tencent.com/product/cos
优势：腾讯云对象存储（COS）是一种高可用、高可靠、安全、低成本的云端存储服务，适用于存储和处理任意类型的文件，包括图片、音视频、文档等。它具有高度可扩展性、灵活的权限管理、多种数据迁移方式等优势。
应用场景：腾讯云对象存储（COS）可广泛应用于网站、移动应用、大数据分析、备份与恢复等场景，用于存储和管理各种类型的文件。

用SVG.js克隆一个SVG矩形

、、、、

你好，我正在尝试用svg.js库克隆这个SVG矩形。我试着这样做，但它似乎不起作用，或者我必须做一些其他的事情，以便它实际上出现/被绘制？

浏览 27提问于2020-01-09得票数 1

1回答

带svg.js的倒置掩模

、、、

我开始在一个项目中使用svg.js，当我在玩面具时，我无法将它们颠倒过来。我画了一个矩形和一个圆圈，用圆圈作为矩形的掩码，只显示了掩码内的矩形部分。有什么方法可以用svg.js或Snap.svg来实现吗？

浏览 3提问于2015-05-21得票数 2

回答已采纳

1回答

我试图使用svg.js库()动态地呈现SVG元素的内容。在创建基本元素(如线条、多边形和简单textx )并使用它们的属性时，一切都工作得很好。现在，我想用更复杂的元素扩展绘图，使用现成的SVG (可以在页面上的隐藏div中获得，也可以通过其他方式获得)，这样我需要以某种方式“克隆”到主SVG元素，并调整大小和位置。下面的图像就是我想要完成的一个例子:矩形是用svgjs的svg.polygon().plot(... )创建的，我想添加

浏览 2提问于2022-02-02得票数 1

回答已采纳

1回答

不能使用svg.draw.js绘制路径

、、

我正在使用和制作一个非常简单的设计工具，在这个工具中，用户可以使用线条、多边形、矩形和自由手绘来进行简单的设计。svg.draw.js是svg.js的扩展，它允许用鼠标绘制元素。现在让我们看一个非常简单的例子。/2.6.3/svg.js"></script></div>为了用鼠标绘制这条折线，我使

浏览 7提问于2017-07-27得票数 2

回答已采纳

1回答

svg.js为矩形正方形

、

我用svg.js在jsfiddle中做了一个，但在Firefox中它是一个矩形。我在Chrome上工作得很好。怎么回事？ var rectangle = draw.rect(100,100)

浏览 3提问于2014-04-15得票数 1

1回答

节点/服务器域中的SVG.js插件

、

谁能告诉我如何让SVG.js插件在节点中工作。我像这样使用svgdom，它为我提供了一个简单矩形的svg代码：const document = window.documentconst ca

浏览 2提问于2019-11-09得票数 0

1回答

如何在angular 6项目中使用svg.js和插件

、

我使用angular-cli创建了一个Angular 6项目。我也安装了svg.js和svg.drggable.js。此外，我还创建了一个名为"draw“的新组件。我想用svg.js做一个简单的矩形。为了在Javascript中做到这一点，HTML文件需要一个带有属性的div-element，例如"drawing“。但是，当我将div-element放入组件html-file中时，并没有创建矩形。在app-comp

浏览 9提问于2018-07-13得票数 3

1回答

根据另一个元素旋转元素(粘滞)

、

我正在尝试旋转文本块，它应该总是粘在红色矩形的底部(就像在Figma中一样，但更简单)。例如，如果我将矩形旋转180度，文本应该在顶部，并且它不应该进入矩形可视部分或与其高度偏离。有一个最小的fiddle包含由svg.js创建的rect和文本元素(svg.js不是交易的一部分，所以你可以用纯css来做)： <head> <link rel="stylesheet"href="https://

浏览 13提问于2021-03-05得票数 0

回答已采纳

2回答

用转角插件导入svg.js

、、、、

我很难导入svg.js和它的在一个角形5项目中使用类型记录。在国家预防机制I安装后： import * as我想要这样的东西： import * as Svg from {'svg.js', 'svg.draggable.js'

浏览 0提问于2018-01-23得票数 5

回答已采纳

2回答

在TypeScript中使用svg.js

、、、

我正在使用TypeScript制作一个网站应用程序，并且我想使用svg.js库。这个是可能的吗？

浏览 33提问于2018-02-12得票数 2

1回答

如何防止svg.js中高宽比的保存

、、

我试图使用svg.js ()呈现一个矩形，并且在调整父窗口/窗口的大小时不保留高宽比。它对于普通的svg元素很好，但对于svg.js元素则不行： <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.min.js">&l

浏览 1提问于2018-03-06得票数 1

回答已采纳

1回答

SVG.js:无法设置矩形宽度或高度的动画

、、

下面是一个尝试使用SVG.js为矩形设置宽度和高度动画的示例；宽度和高度都被列为可设置动画的有效方法。动画没有响应。它返回错误："myRect.animate(...).width不是一个函数“<html xmlns="http://www.w3.org/1999/xhtml"> <title>SVG.js - R

浏览 0提问于2017-05-10得票数 1

1回答

如何在可观察笔记本上使用svg.js

、、、、

我可以使用svg.js版本2.7.1但是当我尝试使用3.0.12版本时，这是行不通的。SVG = require("svg.js@3.0.12")SVG = rt: unable to load package.jsonSVG = require("https://cdnjs

浏览 0提问于2019-05-03得票数 3

回答已采纳

3回答

如何从导入的SVG文件中操作内部元素

我正在使用SVG.js库来操作一个现有的SVG文件。我用Inkscape：创建了这个映像然后，我可以成功地用以下行加载图像：var use = d

浏览 6提问于2017-03-17得票数 1

回答已采纳

1回答

使用svg.js时“未定义SVG”

、、、、

我正在尝试使用svg.js在我的网页中创建一个基本的矩形。我已经通过npm安装库，并且已经在脚本标记中引用了源文件，但是我的SVG绘图将不会显示。控制台提示错误，“未捕获ReferenceError:未定义SVG”，以下是我的项目的一个片段 var draw = SVG('drawing').size(300, 300); <script src="m

浏览 28提问于2019-03-14得票数 2

回答已采纳

2回答

无法在typescript中调用svgdotjs rect方法

、、、

我正在尝试使用带有typescript的Svgdotjs版本3.0.2，以便在屏幕上绘制一个简单的矩形，但是typescript定义文件缺少rect方法。/node_modules/@svgdotjs/svg.js/svg.js.d.ts"/> var draw = svgjs.SVG('stock

浏览 20提问于2019-04-15得票数 0

回答已采纳

1回答

svg.js不适用于Typescript和Stencil.js

、、

我有一个用Typescript构建的基本模板应用程序。我没有使用Angular。我无法使用svg.js。from 'svg.js'; tag: 'astro-sandbox',}) componentDidLoad() { le

浏览 14提问于2018-02-27得票数 0

2回答

Firefox破坏了SVG的使用/防御

、、、

我有一个简单的SVG，它设置一个视图框并绘制一个矩形。它还在<defs>中定义了相同的矩形，并在第一个位置上使用它。下面是一个描述这个问题的小摆设：我做错什么了吗？这是firefox中的一个b

浏览 1提问于2019-08-30得票数 1

回答已采纳

1回答

更改js中SVG.Use元素的颜色

、、、

我使用的是库SVG.js，下面是我的一段代码 var main_field = SVG('field'); var rn = main_field.defs().image('rn.png',70,70我唯一可以更改的属性似乎是不透明度 a.opacity(0.2); 有没有办法改变图像的颜色，或者我必须叠加一个用颜色填充的统一图像才能获得效果？

浏览 310提问于2019-01-02得票数 0

1回答