代码之家 › 专栏 › 技术社区 › dfgd

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

selection overlay d3.js svg text

dfgd · 技术社区 · 10 年前

我有两个重叠的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

1 回复 | 直到 10 年前

AmeliaBR 10 年前

使用 <use> 语句复制并重新设置图形样式。

你说:

我试图使用css和javascript使背景不可选择,但在某些情况下仍然存在双重复制。

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

您可以使用更复杂的JavaScript直接操纵用户的选择,但是 <使用> 技术要简单得多。我已经在最新的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/

需要注意的一点是:由于样式继承规则,您不能设置任何想要超越的样式( stroke 和 stroke-width 在示例中)直接使用 <text> 要素必须为该元素继承这些样式,以便副本将继承您在 <使用> 要素

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