如何将 svg 图像附加到另一个 svg 图像的矩形元素

How do you append a svg image to a rect element of another svg image?

本文关键字：图像 svg 元素 另一个      更新时间：2023-09-26

>我尝试将 svg 图像附加到 svg 图像中的 rect 元素，使用 d3 并尝试

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    d3.select(this)
      .append("svg:image")
        // ..some attributes
  });

这会将<image>添加到 dom，但图像不会显示。我还尝试使用 jquery 在 .each 块中选择this，这会将其添加到 dom 中，但也不会显示。

对于jquery，我已经添加了它

$(this).after("<svg:image xlink:href='/images/image.svg' x='20' y='20' width='20' height='20'/>");

在 html 元素中使用 svg 和 xlink 命名空间

<html lang="en" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

我已经能够使用 .selectAll 每rect.bar创建一个图像，但我想根据datum值创建更多图像。

我需要使用 jquery 来选择父元素，这样图像就不会放在 rect.bar 元素内，而是放在它旁边。在这里代码：

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    var rectBar = $(this).parent()[0]; // Needs parent object, otherwise it will append inside rect
    var num = 4;
    for (var i = 0; i < num; i++) {
      d3.select(rectBar)
        .append("svg:image")
          // ...some attributes
    }
  });

.parent()本身也不起作用。我需要明确地做.parent()[0].不知道为什么。

我不知道

这对你是否重要，但我相信你可以在不使用jquery的情况下做到这一点。 Mike Bostock 的"D3 Workshop"演示展示了如何在 DOM 中正确选择和附加元素。

一旦你可以选择任何元素，你可以附加任何SVG绘图（例如矩形，圆形，文本等，甚至外部图像）。 为了控制附加图像的位置，我相信您可以简单地使用"dx"和"dy"坐标偏移控制器。

在示例"多个 D3 饼图与常见 HTML 布局构造混合"中，我首先基于 HTML 页面上的 HTML DIV 位置创建多个 SVG 画布。 然后，我将条形放置在 SVG 画布上的特定位置。 然后，我将图例项目符号追加并放置在同一 SVG 画布上的不同点。 最后，我将图例文本附加到同一 SVG 画布上不同位置。 在每种情况下，我都使用 dx 和 dy 坐标控制器来控制对象的放置。

我希望这有帮助，

弗兰克

试试这个。

chart.selectAll("rect.bar")
  .each(function(datum, index) {
    $(this).append("<img href='http://www.mysite.com/images/test.jpg' />")
        // ..some attributes
  });
相关文章：