為svg生成動態剪輯路徑的Javascript-有解無憂

我正在使用一個 svg 元素，如下所示

顯示代碼片段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>
</body>
<script type="text/javascript"></script>
</html>

使用 javascript，我打算生成一個svg將yAxis在文本之后顯示每個網格線的內容。例如為 svg 生成動態剪輯路徑的 Javascript

為了以編程方式生成它，我的方法是生成一個clipPath以 arect開頭并與行x=text.x text.width相同的 a，并將其應用于每個.y,widthheight=text.heightline

這是我到目前為止嘗試過的

const svgns = 'http://www.w3.org/2000/svg';

document.querySelectorAll('.tick>line').forEach(
    (a, i) => {
        const defs = document.createElementNS(svgns, 'defs');
        document.querySelector('svg').appendChild(defs);
        const clipPath = document.createElementNS(svgns, 'clipPath');
        clipPath.setAttribute('id', `clip${i}`);
        defs.appendChild(clipPath);
        const data = document.querySelectorAll('.tick>text');
        const rect = document.createElementNS(svgns, 'rect')
        rect.setAttribute('x', `${data[i].getBoundingClientRect().x data[i].getBoundingClientRect().width}`);
        rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
        rect.setAttribute('height', `${data[i].getBoundingClientRect().height}`)
        rect.setAttribute('width', `${a.getBoundingClientRect().width}`)
        clipPath.appendChild(rect);
        a.style.setProperty('clip-path', `url(#clip${i})`)


    }
)

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>
</script>
</html>

我無法弄清楚我在這方面做錯了什么。它沒有回傳我的意圖。javascript此外，是否存在用于元素union/combine/intersect/subtract操作的內置方法 currentyl svg？

uj5u.com熱心網友回復：

這對我有用

const svgns = 'http://www.w3.org/2000/svg';

document.querySelectorAll('.tick>line').forEach(
    (a,i)=>{
        const defs = document.createElementNS(svgns, 'defs');
        document.querySelector('svg').appendChild(defs);
        const clipPath = document.createElementNS(svgns, 'clipPath');
        clipPath.setAttribute('id',`clip${i}`);
        defs.appendChild(clipPath);
        const data = document.querySelectorAll('.tick>text');
        const rect = document.createElementNS(svgns, 'rect')
        rect.setAttribute('x', `${data[i].getComputedTextLength()}`);
        //rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
        rect.setAttribute('height', `${data[i].getBBox().height}`)
        rect.setAttribute('width', `${a.x2.baseVal.value-a.x1.baseVal.value}`)
        clipPath.appendChild(rect);
        a.style.setProperty('clip-path',`url(#clip${i})`)

        
            }
        )

顯示代碼片段

const svgns = 'http://www.w3.org/2000/svg';

    document.querySelectorAll('.tick>line').forEach(
        (a,i)=>{
            const defs = document.createElementNS(svgns, 'defs');
            document.querySelector('svg').appendChild(defs);
            const clipPath = document.createElementNS(svgns, 'clipPath');
            clipPath.setAttribute('id',`clip${i}`);
            defs.appendChild(clipPath);
            const data = document.querySelectorAll('.tick>text');
            const rect = document.createElementNS(svgns, 'rect')
            rect.setAttribute('x', `${data[i].getComputedTextLength()}`);
            //rect.setAttribute('y', `${a.getBoundingClientRect().y}`);
            rect.setAttribute('height', `${data[i].getBBox().height}`)
            rect.setAttribute('width', `${a.x2.baseVal.value-a.x1.baseVal.value}`)
            clipPath.appendChild(rect);
            a.style.setProperty('clip-path',`url(#clip${i})`)

            
                }
            )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>


<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">


    <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
    <rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>

    <g class="bound" style="transform: translate(70px, 70px);">
        <g class="yAxis">
            <g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
                <g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">20%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">40%</text>
                </g>
                <g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
                    <line stroke="currentColor" x2="1160"></line>
                    <text fill="currentColor" x="0" dy="0.32em">60%</text>
                </g>
            </g>
        </g>
    </g>
</svg>
</body>

</html>

d3 equivalent

const clipRectData =d3.selectAll('.tick>text').nodes();
d3.select('svg')
        .selectAll('defs')
        .data(d3.selectAll('.tick>line'))
        .join('defs')
        .append('clipPath')
        .attr('id', (d, i) => { return `clip${i}` })
        .append('rect')
        .attr('x', (d, i) => {
            return `${clipRectData[i].getComputedTextLength()}`
        })
        .attr('height', (d, i) => {
            return `${clipRectData[i].getBBox().height}`
        })
        .attr('width', (d, i) => {
            return `${d.x2.baseVal.value-d.x1.baseVal.value}`
        })

    d3.selectAll('.tick>line').style('clip-path', (d, i) => {
            return `url(#clip${i})`
        })

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482080.html

標籤：javascript svg

上一篇：SVG上的CSS變換原點未按預期作業

下一篇：SVG線/路徑的邊緣/角顏色問題