两个重叠的 svg 文本 - 只选择并复制一个

Question

我有两个重叠的 svg 文本。一个是黑色的，第二个是白色的，用于在文本后面制作一点背景。我正在使用 d3.js 来生成这个 svg。问题是当我选择黑色文本时，它会同时选择两个文本，当我复制它们时，我的剪贴板中有重复的数据。

我尝试使用 css 和 javascript 使背景无法选择，但在某些情况下仍然存在双重副本。

我的第一个解决方案不起作用

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

也试过这个参数

unselectable="on" 
onselectstart="return false"
onmousedown='return false;'
// in css
pointer-events:none 

Answer 1

不要复制标记中的实际文本内容，而是使用<use> 语句复制图形并重新设置样式。

你说：

我尝试使用 css 和 javascript 使背景无法选择，但在某些情况下仍然存在双重复制。

我假设这意味着您使用了pointer-events:none 或使用 JavaScript 来强制浏览器忽略对额外文本元素的点击。这可以防止用户在使用鼠标进行选择时开始或结束该元素中的选择。但是，如果您的选择从元素之前开始并一直持续到之后，它不会阻止该文本元素包含在选择范围内。它也不会阻止用户使用键盘或辅助功能技术选择文本。

您可以使用更复杂的 JavaScript 直接操作用户的选择，但 <use> 技术要简单得多。我已经在最新的 Chrome、Firefox 和 IE 上测试了以下内容，在每种情况下，选择中只包含一份文本。

svg {
    height: 1.5em;
    width: 10em;
    font-size: xx-large;
    stroke: white;
    stroke-width: 0.5;
}
text {
    font-weight: bold;
    font-family: sans-serif;
}

<p>Select all
<svg>
    <use stroke="red" stroke-width="4"
         xlink:href="#double-this" />
    <text id="double-this" x="1ex" dy="1em">Text Content</text>
</svg>
in this snippet and paste below.
</p>
<textArea rows="10"></textArea>

与 JSFiddle 相同的示例：http://fiddle.jshell.net/3htr7btx/1/

需要注意的一点：由于样式继承规则，您不能直接在重复使用的<text> 元素上设置要覆盖的任何样式（示例中为stroke 和stroke-width）。必须为该元素继承它们，以便副本将继承您在 <use> 元素上设置的样式。

另外请注意，您不能重复使用 <tspan> 或 <textPath> 元素，它必须是实际将内容绘制到页面的父 <text>。 SVG 1 和 1.1 定义了另一种重复文本内容的方式，<tref> 元素，但它从未在大多数浏览器中实现，并且可能会在 SVG 2 中被弃用或废弃。