SVG中使用<use>克隆元素时如何隐藏原始模板元素

你不需要把模板元素移到视口外（还要手动补偿坐标，太麻烦），SVG有更标准的解决方案：

方法1：使用<defs>标签（最推荐） #

SVG的<defs>标签就是专门用来存放可复用但不需要直接渲染的元素定义的，放在这个标签里的元素默认不会显示，只会被其他元素引用。

修改后的代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="blocked" width="20" height="20" stroke-width="1" stroke="#000000" fill="#000000" />
  </defs>
  <use href="#blocked" x="20" y="100" />
  <use href="#blocked" x="60" y="60" />
  <use href="#blocked" x="60" y="100" />
</svg>

这个方法完全符合SVG的设计规范，不需要调整任何坐标，引用逻辑清晰。

方法2：给模板元素添加display="none"属性 #

直接给原始的<rect>加上display="none"，这样元素不会被渲染，但依然可以被<use>引用，同样不需要移动坐标：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <rect id="blocked" width="20" height="20" stroke-width="1" stroke="#000000" fill="#000000" display="none" />
  <use href="#blocked" x="20" y="100" />
  <use href="#blocked" x="60" y="60" />
  <use href="#blocked" x="60" y="100" />
</svg>

注意：不要用visibility="hidden"，因为这个属性会保留元素的布局空间（虽然在SVG里影响不大），而display="none"是完全不渲染，更适合做模板隐藏。

内容的提问来源于stack exchange，提问作者thomasa88