两个叠加的 svg 文本 - select 并只复制一个

Question

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

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

我的第一个解决方案行不通

.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> 语句复制图形并重新设置样式。

你说：

I tried to make the background unselectable with css and javascript but there is in some cases still double copy.

我假设这意味着您使用 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>元素。它们必须为该元素继承，以便副本将继承您在 <use> 元素上设置的样式。

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

两个叠加的 svg 文本 - select 并只复制一个

Two overlaying svg texts - select and copy just one

svg

text

overlay

selection

d3.js