如何對齊單獨的svg文本元素，例如word中的字符對齊-有解無憂

我正在使用 svg元素，在這種情況下text，我需要為<text></text>特定單詞的每個字符創建單獨的元素。Lorem

例如，

const svg = document.querySelector("svg");

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

//vboxDim

var vboxW = 200;
var vboxH = 200;

//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', `0 0 ${vboxW} ${vboxH}`);

//make background
var fill1 = '#F1C40F';

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute("width", `${vboxW}`);
bg.setAttribute("height", `${vboxH}`);
bg.setAttribute("fill", fill1);
svg.appendChild(bg);

var txtArray1 = ['L', 'o', 'r', 'e', 'm'];


var textX = svg.viewBox.baseVal.width / 2;
var textY = svg.viewBox.baseVal.height / 2;


for (var i = 0; i < txtArray1.length; i  ) {
    let text1 = document.createElementNS(svgns, "text")
    text1.setAttribute('class', 't0'   i)
    text1.setAttribute('id', 't0'   i);
    text1.setAttribute('x', textX);
    text1.setAttribute('y', textY);
    text1.setAttribute('fill','green');
    text1.setAttribute('dominant-baseline', 'middle'); //positions text in the middle
    text1.setAttribute('text-anchor', 'middle'); //positions text in the middle
    text1.textContent = txtArray1[i];
    svg.appendChild(text1);
    var el = document.getElementById(`t0${i}`);
    var width = el.getBBox().width;
    textX = textX   width;

}

let text2 = document.createElementNS(svgns, "text")
text2.setAttribute('class', 'word')
text2.setAttribute('id', 'word');
text2.setAttribute('x', (svg.viewBox.baseVal.width / 2));
text2.setAttribute('y', (svg.viewBox.baseVal.height / 2) - 50);
text2.setAttribute('fill','brown');
text2.setAttribute('dominant-baseline', 'middle'); //positions text in the middle
text2.setAttribute('text-anchor', 'middle'); //positions text in the middle
text2.textContent = 'Lorem';
svg.appendChild(text2);

<!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>
    <style></style>

</head>

<body>

    <svg>
        <script href="index.js"></script>
    </svg>
</body>

</html>

如果將這些單獨的字符創建為單詞，我希望它們對齊

class="word"

在設計時，我最初的想法是獲取BBox().width立即創建的角色的x，并將下一個元素的增加相同的值。但是最后一個元素與 element in 相去甚遠。

什么是創建單個文本元素并將它們對齊（綠色）的最佳策略，因為它們會出現在句子中（棕色）？

Edit 我已經嘗試過@Robert Longson 的建議。我不確定它是否做錯了，但它不準確。

const svg = document.querySelector("svg");

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

//vboxDim
var vboxW = 200;
var vboxH = 200;

//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', `0 0 ${vboxW} ${vboxH}`);

//make background
var fill1 = '#F1C40F';

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute("width", `${vboxW}`);
bg.setAttribute("height", `${vboxH}`);
bg.setAttribute("fill", fill1);

// append the new rectangle to the svg
svg.appendChild(bg);

var txtArray1 = ['L', 'o', 'r', 'e', 'm'];


var textX = svg.viewBox.baseVal.width / 2;
var textY = svg.viewBox.baseVal.height / 2;



let text2 = document.createElementNS(svgns, "text")
text2.setAttribute('class', 'word')
text2.setAttribute('id', 'word');
text2.setAttribute('x', (svg.viewBox.baseVal.width / 2));
text2.setAttribute('y', (svg.viewBox.baseVal.height / 2) - 50);
text2.setAttribute('fill','brown');
text2.setAttribute('dominant-baseline', 'middle'); //positions text in the middle
text2.setAttribute('text-anchor', 'middle'); //positions text in the middle
text2.textContent = 'Lorem';
svg.appendChild(text2);



for (var i = 0; i < txtArray1.length; i  ) {
    var x = document.getElementById('word');
    let text1 = document.createElementNS(svgns, "text")
    text1.setAttribute('class', 't0'   i)
    text1.setAttribute('id', 't0'   i);
    text1.setAttribute('x', x.getStartPositionOfChar(i).x);
    text1.setAttribute('y', x.getStartPositionOfChar(i).y);
    text1.setAttribute('fill','green');
    text1.setAttribute('dominant-baseline', 'middle'); //positions text in the middle
    text1.setAttribute('text-anchor', 'middle'); //positions text in the middle
    text1.textContent = txtArray1[i];
    svg.appendChild(text1);


}

text2.setAttribute('y', 75);

<!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>
    <style></style>

</head>

<body>
    <link rel="stylesheet" href="style.css">
    </link>
    <svg>
        <script href="index.js"></script>
    </svg>
</body>

</html>

uj5u.com熱心網友回復：

呼叫 getStartPositionOfChar 找出每個字符的位置。
當您制作副本時，您不需要設定文本錨或主導基線，因為原始字符位置已經體現了這一點。

const svg = document.querySelector("svg");

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

//vboxDim
var vboxW = 200;
var vboxH = 200;

//assigning svg element attribute 
svg.setAttribute('class', 'layer1');
svg.setAttribute('xmlns', svgns);
svg.setAttribute('viewBox', `0 0 ${vboxW} ${vboxH}`);

//make background
var fill1 = '#F1C40F';

let bg = document.createElementNS(svgns, 'rect');
bg.setAttribute('class', 'bg');
bg.setAttribute('id', 'bg');
bg.setAttribute("width", `${vboxW}`);
bg.setAttribute("height", `${vboxH}`);
bg.setAttribute("fill", fill1);

// append the new rectangle to the svg
svg.appendChild(bg);

var txtArray1 = ['L', 'o', 'r', 'e', 'm'];


var textX = svg.viewBox.baseVal.width / 2;
var textY = svg.viewBox.baseVal.height / 2;



let text2 = document.createElementNS(svgns, "text")
text2.setAttribute('class', 'word')
text2.setAttribute('id', 'word');
text2.setAttribute('x', (svg.viewBox.baseVal.width / 2));
text2.setAttribute('y', (svg.viewBox.baseVal.height / 2) - 50);
text2.setAttribute('fill','brown');
text2.setAttribute('dominant-baseline', 'middle'); //positions text in the middle
text2.setAttribute('text-anchor', 'middle'); //positions text in the middle
text2.textContent = 'Lorem';
svg.appendChild(text2);



for (var i = 0; i < txtArray1.length; i  ) {
    var x = document.getElementById('word');
    let text1 = document.createElementNS(svgns, "text")
    text1.setAttribute('class', 't0'   i)
    text1.setAttribute('id', 't0'   i);
    text1.setAttribute('x', x.getStartPositionOfChar(i).x);
    text1.setAttribute('y', x.getStartPositionOfChar(i).y);
    text1.setAttribute('fill','green');
    text1.textContent = txtArray1[i];
    svg.appendChild(text1);


}

text2.setAttribute('y', 75);

<!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>
    <style></style>

</head>

<body>
    <link rel="stylesheet" href="style.css">
    </link>
    <svg>
        <script href="index.js"></script>
    </svg>
</body>

</html>

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

標籤：javascript css svg

上一篇：SVG比例（原點居中）

下一篇：使svg色標適合父div的大小