English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG <g>元素用於將SVG形狀分組在一起。分組後，您可以像變形單個形狀一樣變形整個形狀。與 不能單獨成為轉換目標的嵌套 <svg>元素相比，這是一個優勢。您還可以設定分組元素的樣式，並像對待單個元素一樣重複使用它們。
元素g是用來組合對象的容器。添加到g元素上的變換會應用到其所有的子元素上。添加到g元素的屬性會被其所有的子元素繼承。此外，g元素也可以用來定義複雜的對象，之後可以通過<use>元素來引用它們。
這是一個簡單的SVG <g>示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g> <line x1="10" y1="10" x2="85" y2="1000;" "66如果需要使用x和y属性在<g>元素内移动所有形状，则需要将<g>元素嵌套在<svg>元素内。 <svg>元素具有x和y属性。 这是一个实例：/00" <rect x="10" y="20" height="50" width="7500;" "6600; fill: #0066style="stroke: #00/00" <text x="10" y="90" style="stroke: #660000; fill: #66> oldtoolbag.com 기본 튜토리얼</text> </g> </svg>테스트를 보면, 이렇게 보입니다. ‹/›
속성.
此示例显示了以<g>元素組合在一起的3個形狀。 如此處所列，在此分組中沒有特別的好處。 但是請注意當我們請求轉換<g>元素時會發生什麼。 這是代碼：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="1000;" "66如果需要使用x和y属性在<g>元素内移动所有形状，则需要将<g>元素嵌套在<svg>元素内。 <svg>元素具有x和y属性。 这是一个实例：/00" <rect x="10" y="20" height="50" width="7500;" "6600; fill: #0066style="stroke: #00/00" <text x="10" y="90" style="stroke: #660000; fill: #66> oldtoolbag.com 기본 튜토리얼</text> </g> </svg>테스트를 보면, 이렇게 보입니다. ‹/›
속성.
注意<g>元素中的所有形狀如何围绕點50,50 회전45度。
<g>元素的CSS樣式由其子元素繼承。這是一個示例：
<svg width="320" height="150"><g style="stroke: #0000ff; stroke-width: 4px; fill: #ff0000"> <rect x="10" y="10" width="100" height="50" /00" <circle cx="150" cy="35" r="2500;" /00" <circle cx="250" cy="35" r="2500;" "9900; fill: #00ff00;/00" </g> </svg>테스트를 보면, 이렇게 보입니다. ‹/›
이 예제에서 정의된<g>자식 요소가 세 개인 요소를 가집니다. 이<g> 요소는 하나의이들 자식 요소에 의해 상속됩니다. 세 번째 자식 요소는 하나의초기 두 자식 요소는이들 자식 요소에 의해 상속됩니다. 세 번째 자식 요소는 하나의속성.<g>속성을 가집니다. 따라서, 요소에 정의된 스타일이들 자식 요소에 의해 상속됩니다. 세 번째 자식 요소는 하나의style<g>트랙과 채우기 색상 설정 속성이 있지만, 여전히 이를 상속받습니다.요소의-strokewidth
속성.
단점: G 요소는 X와 Y 속성이 없습니다
내부에 쉬프트된 <svg> 요소 내의 형상을 그룹화하는 것과 비교해, <g> 요소 내의 모든 형상을 전환할 수 있는 능력은 장점입니다. <svg> 요소는 자체적으로 전환할 수 없습니다. 그러나 내부 형상을 전환하려면 <svg> 요소를 <g> 요소 내에 내장해야 합니다.
하지만, <svg> 요소와 비교해 <g> 요소는 단점이 있습니다. <g> 요소의 x와 y 속성을 변경하여 모든 내장된 형상을 포함한 <g> 요소를 이동할 수 없습니다. <g> 요소는 x와 y 속성이 없습니다. <g> 요소의 내용을 이동하려면, "translate" 함수를 사용하여 transform 속성을 사용해야 합니다. 예를 들어: transform ="translate(x,y)".
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <line x1="10" y1="10" x2="85" y2="1000;" "66如果需要使用x和y属性在<g>元素内移动所有形状，则需要将<g>元素嵌套在<svg>元素内。 <svg>元素具有x和y属性。 这是一个实例：/00" <rect x="10" y="20" height="50" width="7500;" "6600; fill: #0066style="stroke: #00/00" <text x="10" y="90" style="stroke: #660000; fill: #66> oldtoolbag.com 기본 튜토리얼</text> </g> </svg>테스트를 보면, 이렇게 보입니다. ‹/›
0000"><g>이 예제에서 <svg>이미지의 모든 형상을 내부에 내장하고 있습니다.<svg>요소 내부.100. 이는 내부의 형상의 x 속성을 설정하는 것을 의미합니다<g>전환을 수행한 후 x축으로 이동100, 왜냐하면<svg>위치 x = 100. 실행 후 이미지 효과:
내부에 쉬프트를切换하면,<svg>요소가<g>요소 내에, 다음과 같이 표시됩니다:
<svg width="320" height="150"> <g transform="rotate(45 50 50)"> <svg x="100"> <line x1="10" y1="10" x2="85" y2="10" style="stroke: #006600;"></line> <rect x="10" y="20" height="50" width="75" style="stroke: #006600; fill: #006600"></rect> <text x="10" y="90" style="stroke: #660000; fill: #660000">oldtoolbag.com 기본 튜토리얼</text> </svg> </g> </svg>테스트를 보면, 이렇게 보입니다. ‹/›
그런 다음, 형태가 먼저 x축 방향으로 이동합니다100, 왜냐하면 <svg> 요소의 위치는 x="100"에서 그 위치를 중심으로50,50 회전45도.
이 두 이미지는 서로 유사하게 보일 수 있지만, 다릅니다. 차이점은 운동과 회전 순서입니다. 이미지를 주의 깊게 살펴보면, 표시된 형태가 불균형적으로 배치되어 있다는 것을 볼 수 있습니다. 또한, 첫 번째 이미지가 x 방향에서 이미지 안에서 점으로 표시되더라도 주의하세요. 이러한 일이 발생하는 이유는 형태를 먼저 회전시키고, 회전된 부분에서 텍스트가 이미지 밖으로 튀어나왔기 때문입니다. 그래서 왼쪽으로 이동할 때에도 여전히 텍스트 부분이 부족합니다.