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/

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

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

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

1 个答案: