svg - d3.js:多个 svg:text 元素的可重用 clipPath

Question

我有一个包含许多文本字符串的 d3.js 图表，如果太长则需要将其截断。

根据我的研究，处理 svg 文本截断的方法似乎是:

1. 使用 SVG 剪辑路径
2. 使用 SVG getBBox() 并循环截断字符，直到边界框小于最大值
3. 只使用最大字符长度的最佳猜测并截断字符串
4. 也许使用 foreignObject 将 HTML 对象插入图表，然后使用 css

我正在考虑选项 #1，并且正在努力......

有没有办法创建特定尺寸的 clipPath，然后为多个 svg:g 或 svg:text 元素引用该 clipPath，并将 clipPath 放置在对象的本地翻译坐标中？

有没有办法使用“symbol”或“use”来使其可重复使用，或者我是否必须为每个文本字符串生成一个唯一的 clipPath？!

不确定这是否有意义。

这是我粗略的概念证明，但行不通:

http://jsfiddle.net/rolfsf/9TVq2/

var svg = d3.select("#test")
            .append("svg")
            .attr("width", 300)
            .attr("height", 300)
            .attr("class", "test-container");

var defs = d3.select('.test-container').append("svg:defs");

    defs.append("svg:clipPath")
        .attr("id", "textclip")
        .append("svg:rect")
        .attr("width", 200)
        .attr("height", 20)
        .attr("x", 0)
        .attr("y", 0)
        .attr("clipPathUnits","objectBoundingBox");

    svg.append("g")
        .attr("class", "textgroup")
        .attr("transform", "translate(10, 100)")
        .attr("clip-path", "url(#textclip)")
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("fill", "#000")
        .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.");

    svg.append("g")
        .attr("class", "textgroup")
        .attr("transform", "translate(10, 150)")
        //.attr("clip-path", "url(#textclip)")
        .append("text")
        .attr("x", 0)
        .attr("y", 0)
        .attr("fill", "#000")
        .text("Lorem ipsum dolor sit amet, consectetur adipiscing elit.");    

Answer 1

回答我自己的问题

问题涉及 clippath 和 g 之间不匹配的坐标空间。裁剪路径需要应用相反的坐标空间

查看更新的 fiddle :http://jsfiddle.net/rolfsf/6nDW6/

    defs.append("svg:clipPath")
    .attr("id", "textclip")
    .attr("transform", "translate(-10, -20)")
    .append("svg:rect")
    .attr("width", 200)
    .attr("height", 20)
    .attr("x", 0)
    .attr("y", 0)
    .attr("clipPathUnits","objectBoundingBox");