Question

我有这个SVG文件...我想在单击矩形时添加一些文本，而不应该是黑色的...就像当我单击任何矩形时，它应该是>> g矩形文本/ g

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1200px" height="800px" viewBox="0 0 1200 800" enable-background="new 0 0 1200 800" xml:space="preserve">
<!-- <rect x="50.683" y="111.41" fill="#FFFFFF" stroke="#231F20" stroke-width="3" stroke-miterlimit="10" width="1116.428" height="578.514"/> -->
<rect x="76.564" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="270.276" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="367.133" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="463.989" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="667.414" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="764.27" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="861.126" y="133.804" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="957.983" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.681" height="84.682"/>
<rect x="1054.839" y="132.216" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
<rect x="41.042" y="351.442" fill="#FFFFFF" width="23.851" height="112.15"/>
<rect x="31.853" y="375.293" fill="#494849" width="1118.006" height="65.463"/>
<rect x="76.564" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.682" height="84.682"/>
<rect x="173.42" y="252.552" fill="#FFFFFF" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" width="84.683" height="84.682"/>
</svg>

Answer 1

您将需要创建文本节点。文本的x和y（在这种情况下）是矩形的中心。

请阅读我的代码中的注释。

Transition started: from: A to: B
Action on transition from A to B //when transition starts, the transition action kicks in, before exiting state A
State A exit action on state //before exiting state A, the state A exit action kicks in  
State exited: A
State entered: B
State B entry action on state
Transition ended: from: A to: B

const SVG_NS = 'http://www.w3.org/2000/svg';
//the array of the rects with a white fill
let rects = Array.from(svg.querySelectorAll("rect[fill='#FFFFFF']"));
//an array of true values as long as the rects array
let arr = Array(rects.length).fill(true);
//for each rect in the rects array
rects.forEach((r,i)=>{
  //get the position end the size of the rect (the bounding box)
  let bb = r.getBBox();
  //the center of the rect
  let x = bb.x + bb.width/2;
  let y = bb.y + bb.height/2;
  //on click
  r.addEventListener("click", ()=>{
  //if there isn't already a text element there
    if(arr[i]){
    //add a text element
    let txt = drawSVGelmt({x:x,y:y},"text", svg)
    txt.textContent = i;
    arr[i] = false;
    }
  })
 
})

// a function to create a new svg element
function drawSVGelmt(o,tag, parent) {

  let elmt = document.createElementNS(SVG_NS, tag);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

text{text-anchor:middle; dominant-baseline:middle}

观察：由于用户可以多次单击一个矩形，因此需要添加一个条件。如果没有文本节点，则创建一个，否则不要创建。

如何使用JS

1 个答案: