是否有一个与文本的文本锚点表示属性等效的矩形？
我希望能够从左侧/右侧或根据情况定位矩形。我知道这可以通过一些简单的计算来完成，但我只是想知道是否已经存在内置的东西。
文本锚点演示属性上的链接...https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
我正在寻找同样的问题，发现这篇文章没有答案。这个问题很老了，但我把解决方案放在这里，供有人可能像我一样寻找它。
当指定 svg 矩形的 (x, y) 时，它的处理方式如下：“将矩形的左上角放在点 (x, y)”。但人们可能希望 (x, y) 被视为：“嘿，将我的矩形中心放在 (x, y)” or “嘿，将我的矩形的右上角放在 (x, y)”。为此使用了锚机制，但 svg 中没有这样的机制。
您仍然可以实现锚定力学与变换（使用CSS或属性）。这是可能的，因为translate.translate中的百分比值是相对于应用的形状而不是其父代来计算的。
该解决方案目前仅适用于 Chrome
所以要达到“嘿，将我的矩形中心放在 (x, y)”您需要将锚点设置为（0.5，0.5）。这是如何通过转换完成的：
.rect-anchor-50-50 {
/*
Precents in translate are calculated relative to
the applied rectangle, but not its parent.
Set anchor to (0.5, 0.5) or (center, center).
*/
transform: translate(-50%, -50%);
}
代码片段开启jsfiddle http://jsfiddle.net/kq5vk0dk/1/
.rect-anchor-0-0 {
fill: #afafaf;
}
.rect-anchor-50-50 {
/*
precents in translate are calculated relative to
the applied rectangle, but not its parent
*/
transform: translate(-50%, -50%);
fill: #afcfae;
opacity: 0.75;
}
.group {
fill: red;
}
svg {
fill: lightblue;
}
<!-- One can use translate with percents to achieve anchor like mechanics -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect fill="lightblue" x="0" y="0" width="100%" height="100%"></rect>
<!-- Use translate to achieve anchor mechanics -->
<rect class="rect-anchor-0-0" x="150" y="150" width="200" height="35" />
<rect class="rect-anchor-50-50" x="150" y="150" width="200" height="35" />
<!-- Rect x,y position mark for convenience -->
<circle cx="150" cy="150" r="2" fill="red"></circle>
</svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
