Question

如何使用svg来更改嵌套d3.js的枢轴点？

我尝试使用text-anchor和alignment-baseline，但是它不适用于svg（适用于text）。

debugger;
var svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

const buttonSvg = svg
  .append("svg");
buttonSvg
  .attr("x", "50%")
  .attr("y", "50%")
  .attr("width", "50%")
  .attr("height", "20%")
  .attr("alignment-baseline", "middle")
  .attr("text-anchor", "middle");

const rectAroundText = buttonSvg
  .append("rect");
rectAroundText
  .attr("fill", "yellowgreen")
  .attr("width", "100%")
  .attr("height", "100%");

const textMiddleX = 50;
const textMiddleY = 50;

const testText = svg
  .append("text");
testText
  .attr("x", textMiddleX + "%")
  .attr("y", textMiddleY + "50%")
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "central")
  .attr("x", "50%")
  .attr("y", "50%")
  .attr("fill", "#000")
  .classed("scalingText", true)
  .text("svdfv");

const textBox = testText.node().getBBox();

/*rectAroundText
	.attr("x", textBox.x)
  .attr("y", textBox.y)
  .attr("width", textBox.width)
  .attr("height", textBox.height);*/

#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}

.scalingText {
  font-size: 400%;
}

@media screen and (max-width: 900px) {
  .scalingText {
    font-size: 300%;
  }
}

@media screen and (max-width: 700px) {
  .scalingText {
    font-size: 200%;
  }
}

@media screen and (max-width: 500px) {
  .scalingText {
    font-size: 100%;
  }
}

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 1

alignment-baseline定义相对于父元素的垂直文本位置。由于<svg>或<g>之类的结构元素不可定位，因此没有文本基线，因此无法将其用于<text>元素。请改用dominant-baseline。 -Chrome允许将alignment-baseline用于<text>，但这违反了spec。
在SVG 1.1规范中，alignment-baseline和dominant-baseline是不可继承的。 SVG 2明确更改了dominant-baseline的内容，但尚未在所有地方实现。最好使用直接将文本元素作为目标（或在其上使用presentation属性）的CSS规则。 text-anchor是可继承的，并且可以正常工作。
值central用于表意文字。对于拉丁语，应使用middle对齐x高度的中间。

使用d3.js更改嵌套svg的枢轴点

1 个答案: