javascript 如何在SVG创建的矩形中编辑文本属性？

oiopk7p5 于 2023-01-08 发布在 Java

关注(0)|答案(3)|浏览(115)

我正在画一个svg，它有四个矩形，每个矩形都有特定的文本（标签）。我有一个要求，能够编辑文本，它应该采取用户定义的标签。我尝试了一些事情，如使用输入框和contenteditable真属性的文本，但似乎没有为我工作。我已经分享了我的代码的一部分，也jsfidle链接。

const drawSvg= svg.append("g")
. append("rect")
.attr("id", "myRect")
. style("fill", function (d) {color});
g.selectAll("g"). append("text").attr("id", "myText")
.text (function (d) {return label;});

https://jsfiddle.net/ypvoxf6h/4/

JavaScript

来源：https://stackoverflow.com/questions/75021249/how-do-i-edit-the-text-attribute-in-svg-created-rectangles

3条答案

按热度按时间

cunj1qz11#

Array.from(document.querySelector('.svg').querySelectorAll('text')).forEach(el => {
  el.addEventListener('click', function(evt) {
    evt.stopImmediatePropagation();
    const rect_text = evt.target.getBoundingClientRect();
    const input = document.createElement("input");
    input.value = evt.target.innerHTML;
    input.onkeyup = function(e) {
      if (["Enter", "Escape"].includes(e.key)) {
        this.blur();
        return;
      }
      evt.target.innerHTML = this.value;
    };
    input.onblur = function(e) {
      input.remove();
    };
    input.style.left = rect_text.left + 'px';
    input.style.top = rect_text.top + 'px';
    input.style.width = 2 + 'ch';
    input.style.height = rect_text.height + 'px';
    document.querySelector('.svg').append(input);
    input.focus();
  });
});

.svg input {
  position: absolute;
  z-index: 1;
  font-size: 4.5em;
  margin: 0;
  padding: 0;
  border: none;
}

<div class="svg">
  <svg id="mySVG" viewBox="0 0 4 2" width="400px">
        <g dominant-baseline="middle" text-anchor="middle" font-size=".73">
            <rect x="0" y="0" height="1" width="1.2" style="fill: rgb(255, 46, 0);"/>
            <text class="text1" x="0.2" y="1.5" style="fill: black;">0</text>
            <rect x="1" y="0" height="1" width="1" style="fill: rgb(0, 184, 0);"/>
            <text class="text2" x="1.5" y="1.5" style="fill: black;">1</text>
            <rect x="2" y="0" height="1" width="1" style="fill: rgb(0, 25, 255);"/>
            <text class="text3" x="2.5" y="1.5" style="fill: black;">2</text>
            <rect x="3" y="0" height="1" width="1" style="fill: rgb(179, 179, 179);"/>
            <text class="text4" x="3.5" y="1.5" style="fill: black;">3</text>
        </g>
    </svg>
</div>

和你的jsfidle例子不一样，但是你在这里编辑"几乎"更好

赞(0）回复(0）举报 2023-01-08

cyej8jka2#

如果问题是改变内部文本，你可以在每个文本中放一个类，通过类选择它，改变内部文本。

const svg = document.querySelector('#mySVG').querySelector('.text1').innerHTML = 'A';

<svg id="mySVG" viewBox="0 0 4 2" width="400px">
    <g dominant-baseline="middle" text-anchor="middle" font-size=".73">
        <rect x="0" y="0" height="1" width="1.2" style="fill: rgb(255, 46, 0);"/>
        <text class="text1" x="0.2" y="1.5" style="fill: black;">0</text>
        <rect x="1" y="0" height="1" width="1" style="fill: rgb(0, 184, 0);"/>
        <text class="text2" x="1.5" y="1.5" style="fill: black;">1</text>
        <rect x="2" y="0" height="1" width="1" style="fill: rgb(0, 25, 255);"/>
        <text class="text3" x="2.5" y="1.5" style="fill: black;">2</text>
        <rect x="3" y="0" height="1" width="1" style="fill: rgb(179, 179, 179);"/>
        <text class="text4" x="3.5" y="1.5" style="fill: black;">3</text>
    </g>
</svg>

赞(0）回复(0）举报 2023-01-08

8ehkhllq3#

是的，你已经做了所有的事情，只是为了添加输入更改...

document.querySelector('#text1').addEventListener('change', function(evt) {
  document.querySelector('#mySVG').querySelector('.' + evt.target.id).innerHTML = evt.target.value;
})

<svg id="mySVG" viewBox="0 0 4 2" width="400px">
    <g dominant-baseline="middle" text-anchor="middle" font-size=".73">
        <rect x="0" y="0" height="1" width="1.2" style="fill: rgb(255, 46, 0);"/>
        <text class="text1" x="0.2" y="1.5" style="fill: black;">0</text>
        <rect x="1" y="0" height="1" width="1" style="fill: rgb(0, 184, 0);"/>
        <text class="text2" x="1.5" y="1.5" style="fill: black;">1</text>
        <rect x="2" y="0" height="1" width="1" style="fill: rgb(0, 25, 255);"/>
        <text class="text3" x="2.5" y="1.5" style="fill: black;">2</text>
        <rect x="3" y="0" height="1" width="1" style="fill: rgb(179, 179, 179);"/>
        <text class="text4" x="3.5" y="1.5" style="fill: black;">3</text>
    </g>
</svg>

<label for="text1">text 1
<input id="text1" value="0"></label>

text1已完成...您可以为其他用户复制和粘贴

赞(0）回复(0）举报 2023-01-08

我来回答

javascript 如何在SVG创建的矩形中编辑文本属性？

3条答案

相关问题

热门标签

最新问答