SVG Positioning - Stack Overflow
Có thể bạn quan tâm
-
- Home
- Questions
- Tags
- Users
- Companies
- Labs
- Jobs
- Discussions
- Collectives
-
Communities for your favorite technologies. Explore all Collectives
- Teams
Ask questions, find answers and collaborate at work with Stack Overflow for Teams.
Try Teams for free Explore Teams - Teams
-
Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams
Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about CollectivesTeams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about TeamsGet early access and see previews of new features.
Learn more about Labs SVG Positioning Ask Question Asked 15 years, 11 months ago Modified 10 months ago Viewed 318k times 270I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that group would also move. But that doesn't seem to be possible.
- How do most people go about positioning a group of elements which you wish to move in tandem?
- Is there any concept of relative positioning? e.g. relative to its parent
- Not 100% sure this is good practice, but a solution that worked for me: put the <g> into <defs> section of svg, then render it with <use>. Unlike <g>, <use> allows position attributes. – c0der Commented Jan 30, 2023 at 15:48
5 Answers
Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 352Everything in the g element is positioned relative to the current transform matrix.
To move the content, just put the transformation in the g element:
<g transform="translate(20,2.5) rotate(10)"> <rect x="0" y="0" width="60" height="10"/> </g>Links: Example from the SVG 1.1 spec
Share Improve this answer Follow edited Jan 27, 2009 at 2:13 Corey Trager 23.1k20 gold badges87 silver badges121 bronze badges answered Jan 26, 2009 at 12:33 Aaron DigullaAaron Digulla 328k110 gold badges623 silver badges835 bronze badges 1- Yes, that works. If element attributes get in % ratio then perfectly position will occur. – Abbas Commented Feb 6, 2022 at 10:18
There is a shorter alternative to the previous answer. SVG Elements can also be grouped by nesting svg elements:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg x="10"> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/> </svg> <svg x="200"> <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/> </svg> </svg>
The two rectangles are identical (apart from the colors), but the parent svg elements have different x values.
See http://tutorials.jenkov.com/svg/svg-element.html.
Share Improve this answer Follow edited Mar 4, 2024 at 12:46 Erman Kadir Kahraman 6871 gold badge7 silver badges9 bronze badges answered Nov 28, 2012 at 19:59 Kağan KayalKağan Kayal 2,4431 gold badge20 silver badges33 bronze badges 4- 46 Right, the SVG element can be a grouping element as well. I wanted to point out that the SVG element implements clipping by default (at least at the moment in Chrome). This means any overflow will not be visible. Unlike the "g" element. Just set overflow="visible" and you're back in business, if this bites you. – bladnman Commented Sep 6, 2013 at 22:21
- 1 It's useful if you want to translate a group of elements with percentages: stackoverflow.com/a/17103928/470117 – mems Commented Sep 26, 2014 at 13:12
- 39 Are there any drawbacks for using svg instead of g? – grabantot Commented Jun 15, 2017 at 8:18
- 5 @grabantot Performance! <svg> creates a full context for clipping etc and requires more memory than <g> per element created. Use nested <svg> only if you need it, stick to <g> otherwise – sudhakar Commented Mar 5, 2023 at 22:21
As mentioned in the other comment, the transform attribute on the g element is what you want. Use transform="translate(x,y)" to move the g around and things within the g will move in relation to the g.
Share Improve this answer Follow edited Feb 25, 2016 at 17:30 draw 4,8466 gold badges32 silver badges39 bronze badges answered Feb 18, 2009 at 14:32 codedreadcodedread 1,38212 silver badges21 bronze badges Add a comment | 32There are two ways to group multiple SVG shapes and position the group:
The first to use <g> with transform attribute as Aaron wrote. But you can't just use a x attribute on the <g> element.
The other way is to use nested <svg> element.
<svg id="parent"> <svg id="group1" x="10"> <!-- some shapes --> </svg> </svg>In this way, the #group1 svg is nested in #parent, and the x=10 is relative to the parent svg. However, you can't use transform attribute on <svg> element, which is quite the contrary of <g> element.
Share Improve this answer Follow edited Oct 24, 2016 at 14:53 sighrobot 4473 silver badges16 bronze badges answered May 2, 2015 at 5:50 DevGrowth.TechDevGrowth.Tech 1,56317 silver badges23 bronze badges 6- 18 why <g> doesn't have a x and y attribute while all other svg tags have it ? it means that position is always absolute in a <svg>... no relative position, – reuns Commented Nov 20, 2015 at 2:18
- 3 open source committees are like that. – Muhammad Umer Commented Aug 19, 2016 at 16:26
- I agree... it seems like a bad design choice. Simply incrementing a group's X-transform requires writing a potentially complicated string and storing all the variables somewhere else – Eyelash Commented Sep 18, 2016 at 14:10
- 11 @user1952009: there’s a chance — just a chance — that you don’t actually understand the design choices that went into SVG. – Paul D. Waite Commented Apr 3, 2017 at 22:15
- 5 <g> is for grouping. It doesn't represent any shape on its own so it wouldn't make sense for it to have a location or a size. It makes sense to have a transform attribute though, which you can read like "apply this transform to the whole group". – moongoal Commented Aug 13, 2019 at 15:38
I know this is old but neither an <svg> group tag nor a <g> fixed the issue I was facing. I needed to adjust the y position of a <g> tag which also had animation on it.
The solution was to use both the <svg> and <g> tag together:
<svg y="1190" x="235"> <g class="light-1"> <path /> </g> </svg> Share Improve this answer Follow edited Mar 16, 2021 at 11:36 Biff MaGriff 8,2319 gold badges64 silver badges100 bronze badges answered Jul 3, 2020 at 18:46 Friendly CodeFriendly Code 1,6451 gold badge26 silver badges43 bronze badges Add a comment |Your Answer
Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Draft saved Draft discardedSign up or log in
Sign up using Google Sign up using Email and Password SubmitPost as a guest
Name EmailRequired, but never shown
Post Your Answer DiscardBy clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.
Not the answer you're looking for? Browse other questions tagged
or ask your own question.- The Overflow Blog
- Generative AI is not going to build your engineering team for you
- Developers want more, more, more: the 2024 results from Stack Overflow’s...
- Featured on Meta
- The December 2024 Community Asks Sprint has been moved to March 2025 (and...
- Stack Overflow Jobs is expanding to more countries
Linked
4 How to position a "g" element SVG 60 Svg path position 50 How to translate an SVG group by a percentage of the viewport 22 Set X and Y value for g element of SVG 2 Is there a simple way to draw centred text over an existing SVG path in the DOM using Javascript? 0 Nest multiple rects inside multiple svg containers with d3? 0 Displaying image at given position 0 horizontal center svg path in svg include into div containerRelated
61 Positioning SVG elements using CSS 10 SVG absolute positioning 2 Place svg-groups like inline-blocks 0 Nested SVG absolute positioning 0 Positioning many groups in SVG 0 How to position an element in relation to other elements in a svg 1 Positioning images within SVG 2 Position of svg elements 1 Place SVG's relative to each other 1 SVG: position group relative to other groupHot Network Questions
- Luke 20:38 | "God" or "a god"
- Fantasy-mystery/paranormal unfinished book series with ghosts as major plot point
- 3d point sorting in tikz
- Are David Chalmers' definitions of strong and weak emergence scientifically testable when applied to consciousness as emerging from physics?
- A tetrahedron for 2025
- What is a good way to DM searching for something?
- Problems with relaxed PES scan in xtb
- The extremum of the function is not found
- Pete's Pike 7x7 puzzles - Part 3
- Formal Languages Classes
- NPC War Priest Healing Light
- Schengen Visa - Purpose vs Length of Stay
- Are qualia an illusion?
- Why does the MS-DOS 4.0 and 6.22 boot sector change the disk parameter table?
- Where does one learn about the weather?
- Should I use ChatGPT and Wolfram Mathematica as a student?
- Not a Single Solution!
- Making New Year's Resolutions Using Partitions
- Procne and Philomela as swallow and nightingale, or vice-versa?
- Why does one have to avoid hard braking, full-throttle starts and rapid acceleration with a new scooter?
- Why not make all keywords soft in python?
- Doing something for its own sake
- Submitted a manuscript to a journal (it takes ~ 10 months for review). Should I upload the manuscript on arxiv too?
- What is this corkscrew-like part and what is it for?
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
defaultTừ khóa » Svg G X Y
-
- SVG: Scalable Vector Graphics - MDN - Mozilla -
SVG Attribute Reference - SVG: Scalable Vector Graphics | MDN
-
SVG G Element
-
Understanding SVG Coordinate Systems And Transformations (Part 3)
-
Uses Of Interface ape.ILcdEllipse (LuciadFusion API ...
-
Uses Of Interface ape.ILcdArcBand
-
React Native SVG - GitHub
-
Zoom Not Working On Rect With Style Fill:none · Issue #130 - GitHub
-
Services - Galaxy International
-
Defaultazurecredential Get Token. Nov 28, 2018 · Azure Functions Tri...
-
How Old Was Tooka. Created On January 01 Apr 01, 2021 · Bibby Was A
-
If - NECSAL VISION