Rect相当于文本的文本锚定表示属性？ [英] Rect's equivalent to text's text-anchor presentation attribute?

问题描述

是否有一个矩形相当于文本的文本锚定显示属性？

我想要能够从左/右侧定位一个矩形，情况。我知道它可以通过一些简单的计算，但我只是想知道是否已经内置的东西存在。

链接文本锚定表示属性。 。
https：//developer.mozilla。 org / en-US / docs / Web / SVG / Attribute / text-anchor

解决方案

同样的问题，发现这个帖子没有答案。

当一个指定（x，y）的svg rect时，这个问题是很老的，但我把这里的解决方案，如下处理：将矩形的左上角放在点（x，y）。但是我们可能希望将（x，y）视为：嘿，把我的直角的中心放在（x，y）或者嘿，把右上角我的rect在（x，y）。对于这个锚点，使用了力学，但在svg中没有这样的力量。

）。这是可能的，因为transform.translate中的百分比值是相对于应用的形状计算的，而不是它的父代。

解决方案只在CHROME现在工作

因此，为了实现，您需要将anchor设置为（x，y） 0.5，0.5）。这里如何使用transform：

  .rect-anchor-50-50 {
 / * 
 translate中的Precents是相对于
应用的矩形计算的，而不是其父。 
将定位点设置为（0.5，0.5）或（中心，中心）。 
 * / 
 transform：translate（-50％，-50％）; 
} 
  

---

href =http://jsfiddle.net/kq5vk0dk/1/ =nofollow> jsfiddle

  .rect相对于应用的矩形计算rect-anchor-50-50 {/ * precents，而不是它的父* / transform：translate（-50％， - 50％）; fill：#afcfae; opacity：0.75;}。group {fill：red;} svg {fill：lightblue;}  

 <！ - 可以使用含百分数的翻译来实现类似锚点的机制 - >< svg version =1.1xmlns =http://www.w3.org/2000 / svgxmlns：xlink =http://www.w3.org/1999/xlinkwidth =300height =300> < rect fill =lightbluex =0y =0width =100％height =100％>< / rect> <！ - 使用翻译实现锚点力学 - > < rect class =rect-anchor-0-0x =150y =150width =200height =35/& < rect class =rect-anchor-50-50x =150y =150width =200height =35/& <！ -  Rect x，y position mark为了方便 - > < circle cx =150cy =150r =2fill =red>< / circle>< / svg>  

/ div>

Is there a rect's equivalent to text's text-anchor presentation attribute?

I want to be able to position a rect from its left/right side or depending on the situation. I know that it could be done with some simple calculations, but I'm just wondering if something already built-in exists.

Link on text-anchor presentation attribute... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

解决方案

I was searching for the same question, and found this post with no answer. The question is pretty old, but i put here the solution for someone may look for it as i did.

When one specifies (x, y) of a svg rect it is treated like: "Place the left top corner of the rect at the point (x, y)". But one may want (x, y) to be treated as: "Hey, place the center of my rect at (x, y)" or "Hey, place the top right corner of my rect at (x, y)". For this anchor mechanics is used, but there is no such in svg.

You can still achieve anchor mechanics with transform (using css or attribute). It is possible since percent values in transform.translate are calculated relative to applied shape, but not its parent.

THE SOLUTION WORKS ONLY IN CHROME FOR NOW

So to achieve "Hey, place the center of my rect at (x, y)" you need to set anchor to (0.5, 0.5). Here how it is done with transform:

.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%);
}

---

Code Snippet on jsfiddle

.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>

这篇关于Rect相当于文本的文本锚定表示属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！