Gibt es ein Rect-Äquivalent zum Text-Anchor-Präsentationsattribut?Rect entspricht dem Text-Anker-Darstellungsattribut von Text?

Ich möchte in der Lage sein, ein Rect von seiner linken/rechten Seite oder abhängig von der Situation zu positionieren. Ich weiß, dass es mit ein paar einfachen Berechnungen gemacht werden könnte, aber ich frage mich, ob etwas bereits eingebaut ist.

-Link auf dem Text-Anker Präsentation Attribute ... https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor

2013-11-01 Dany Marcoux

Es gibt nichts, wie dies für andere SVG-Elemente (einschließlich rect), siehe the spec. Sie müssen die Position selbst berechnen.

Quelle

2013-11-01 14:17:41

Danke für den Link. –

Ich suchte nach der gleichen Frage und fand diesen Beitrag ohne Antwort. Die Frage ist ziemlich alt, aber ich lege hier die Lösung für jemanden kann suchen, wie ich es tat.

Wenn man (x, y) eines SVG-Rect angibt, wird es wie folgt behandelt: "Platziere die linke obere Ecke des Rect an dem Punkt (x, y)". Aber man möchte, dass (x, y) wie folgt behandelt wird: "Hey, platziere die Mitte von meinem Rect bei (x, y)" oder "Hey, platziere die obere rechte Ecke von meinem Rect bei (x, y) ". Für diese Anker Mechanik wird verwendet, aber es gibt keine solche in Svg.

Sie können immer noch die Ankermechanik mit transform (mit CSS oder Attribut) erreichen. Dies ist möglich, da die prozentualen Werte in transform.translate relativ zur angewendeten Form berechnet werden, nicht jedoch zu deren Eltern.

DIE LÖSUNG ARBEITET IN CHROM NUR FÜR JETZT

So zu erreichen "Hey, legen Sie das Zentrum meines rect bei (x, y)" Sie müssen gesetzt Anker (0,5, 0,5) . Hier ist, wie es mit Transformation durchgeführt wird:

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

Quelle

2015-11-13 10:27:12 garek

Rect entspricht dem Text-Anker-Darstellungsattribut von Text?

Antwort

Code Snippet auf jsfiddle

Verwandte Themen