Question

我在页面上有三个SVG图像。一个是＆＃34;图像编辑器＆＃34;您可以在其中输入一些文字，图标，拖动和缩放等等。

另外两个SVG通过USE元素使用顶级SVG中的内容，并显示最终结果的预览。

当我在编辑器中编辑某些内容时，两个预览会自动更新。完善。但我不想在底部的两个预览SVG中显示边界框，变换工具，指南等。

有没有办法对这些SVG的（阴影）DOM进行样式（CSS）或操纵（JS）以显示这些额外的元素？

Answer 1

更改编辑器代码，以便绘图元素进入一个组，并且句柄元素进入另一个组。然后在您的克隆SVG中，您的<use>元素引用第一组。

＆＃13;

svg {
  border: solid 1px black;
}

＆＃13;

<svg width="500" height="300" viewBox="0 0 500 300">
  
  <g id="drawing">
    <ellipse cx="250" cy="150" rx="200" ry="100" fill="orange"/>
  </g>
  
  <g id="handles">
    <rect x="50" y="50" width="400" height="200" fill="none" stroke="blue" stroke-dasharray="10"/>
  </g>
  
</svg>


<br/>


<svg width="250" height="150" viewBox="0 0 500 300">
  <use xlink:href="#drawing"/>
</svg>

＆＃13;

Answer 2

就像@paulLeBeau一样，我建议把它放在一组元素之外这里的javascript代码会将句柄放在group元素的所有角上。（本例中为edit-group）如果你有一个你已经绘制过的组，你可以简单地将该组放入这个代码中，并且它应该成为句柄。

＆＃13;

function setAttributes(elem, attrs) {
  for (var key in attrs) {
    elem.setAttribute(key, attrs[key]);
  }
}

document.addEventListener("DOMContentLoaded", function(event) {
  var svgns = "http://www.w3.org/2000/svg"
  var svgdoc = document.getElementById("edit-svg");

  var editgroup = svgdoc.getElementById("edit-group");
  var grouprect = editgroup.getBBox();

  var handle = document.createElementNS(svgns, "rect");
  setAttributes(handle, {
    "transform": "translate(-1.5 -1.5)",
    "fill": "none",
    "stroke": "black",
    "stroke-width": "0.5",
    "width": "3",
    "height": "3",
    "x": grouprect.x,
    "y": grouprect.y
  });
  svgdoc.appendChild(handle);
  
  var handle2 = document.createElementNS(svgns, "rect");
  setAttributes(handle2, {
    "transform": "translate(-1.5 -1.5)",
    "fill": "none",
    "stroke": "black",
    "stroke-width": "0.5",
    "width": "3",
    "height": "3",
    "x": grouprect.x + grouprect.width,
    "y": grouprect.y
  });
  svgdoc.appendChild(handle2);
  
  var handle3 = document.createElementNS(svgns, "rect");
  setAttributes(handle3, {
    "transform": "translate(-1.5 -1.5)",
    "fill": "none",
    "stroke": "black",
    "stroke-width": "0.5",
    "width": "3",
    "height": "3",
    "x": grouprect.x,
    "y": grouprect.y + grouprect.height
  });
  svgdoc.appendChild(handle3);
  
  var handle4 = document.createElementNS(svgns, "rect");
  setAttributes(handle4, {
    "transform": "translate(-1.5 -1.5)",
    "fill": "none",
    "stroke": "black",
    "stroke-width": "0.5",
    "width": "3",
    "height": "3",
    "x": grouprect.x + grouprect.width,
    "y": grouprect.y + grouprect.height,
  });
  svgdoc.appendChild(handle4);
  
  var dotted = document.createElementNS(svgns, "rect");
  setAttributes(dotted, {
    "fill": "none",
    "stroke": "black",
    "stroke-width": "0.5",
    "stroke-dasharray": "5",
    "width": grouprect.width,
    "height": grouprect.height,
    "x": grouprect.x,
    "y": grouprect.y
  });
  svgdoc.appendChild(dotted);

});

＆＃13;

.main {
  border: 1px solid black;
}
#edit-svg {
  width: 500px;
}
.preview svg {
  border: 1px solid black;
}

＆＃13;

<div class="main">
  <svg id="edit-svg" viewbox="0 0 110 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="edit-group">
      <text x=5 y=40 font-size="10" stroke="firebrick">Ask us almost anything</text>
    </g>
  </svg>
</div>
<div class="preview">
  <h2>Preview</h2>
  <svg width="500px" viewBox="0 0 110 50">
    <use x="0" y="0" xlink:href="#edit-group" />
  </svg>
</div>

＆＃13;

如何设置/操作SVG USE元素的内容

2 个答案: