Question

我有一个用例，其中应将路径动态附加到SVG。我已经使用d3js编写了类似的代码。

componentDidMount() {
    let leftBorderedPath = 'M0,0 v100 h-20 a10,10 0 0 1 -10,-10 v-100 a10,10 0 0 1 10,-10 h20 z';
    let rightBorderedPath = 'M0,0 h20 a10,10 0 0 1 10,10 v100 a10,10 0 0 1 -10,10 h-20 v-100 z';
    let bottomBorderedPath = 'M0,0 h120 v20 a10,10 0 0 1 -10,10 h-120 a10,10 0 0 1 -10,-10 v-20 z';
    let alignDirection = '';
    this.props.takeProps.map((item) => {
        if(item.coOrds[0] > 500 && item.coOrds[1] > 500) {
            item["align"] = 'leftBorderedPath';                           
        } else if(item.coOrds[0] < 500 && item.coOrds[1] > 500) {
            item["align"] = 'rightBorderedPath';
        }
    });
    this.props.takeProps.map((item) => {
        let suitablePath = '';
        if(item.align == 'leftBorderedPath'){
            suitablePath = leftBorderedPath;
            alignDirection = 'tb';
        } else if(item.align == 'rightBorderedPath'){
            suitablePath = rightBorderedPath;
            alignDirection = 'tb';
        } else {
            suitablePath = bottomBorderedPath;
            alignDirection = '';
        }
        let x = item.coOrds[0];let y = item.coOrds[1];
        let svg = d3.select("#Group_599").append("g").attr("transform", "translate(" + x + "," + y + ")");
        svg.append("path")
        .attr("d", suitablePath)
        .attr("stroke", "#3cce40")
        .attr("fill", "#3cce40");
        let matrixValue = '';
        if(alignDirection == 'tb'){
            matrixValue = "matrix(1 0 0 1 -15 20)";
        }else {
            matrixValue = "matrix(1 0 0 1 45 20)";
        }
        svg.append("text")
        .attr("transform", matrixValue)
        .attr("fill", "#ffffff")
        .attr("font-size", "16")
        .attr("font-weight", "bold")
        .attr("font-family", "SpartanMB-Bold")
        .attr("writing-mode", alignDirection)
        .text(item.displayName);
    });
}

因此，这是将添加到SVG的标记。

<svg viewBox="0 0 1280 768">
  ...
  ...
  <g transform="translate(110,150)">
     <path d="M0,0 h120 v20 a10,10 0 0 1 -10,10 h-120 a10,10 0 0 1 -10,-10 v-20 z" stroke="#3cce40" fill="#3cce40"></path>
     <text transform="matrix(1 0 0 1 45 20)" fill="#ffffff" font-size="16" font-weight="bold" font-family="SpartanMB-Bold" writing-mode="">Label1</text>
  </g>
  <g transform="translate(1135,550)">
     <path d="M0,0 v100 h-20 a10,10 0 0 1 -10,-10 v-100 a10,10 0 0 1 10,-10 h20 z" stroke="#3cce40" fill="#3cce40"></path>
     <text transform="matrix(1 0 0 1 -15 20)" fill="#ffffff" font-size="16" font-weight="bold" font-family="SpartanMB-Bold" writing-mode="tb">LabelLabel2</text>
  </g>
</svg>

我的问题是

该路径的标签文本太长和太短。路径的宽度应该是动态的。（我不知道如何推断字符串的宽度以及如何增加/减少路径的宽度）
文本应准确地贴在标签上，并以相同的填充量填充，以方向为准。

我还对特定getBBox()中的path元素使用了<g>，并得到了X, Y, Width, Height并考虑应用.attr("transform", "matrix()")。但是X和Y始终是所有路径的负值。不知道如何处理这个用例。任何帮助将不胜感激。

如何构建SVG路径，以使路径的宽度应根据文本大小动态变化

0 个答案: