웹 사이트의 경우 클릭 가능한 SVG를 만들려고합니다. (이미지를 게시하고 싶지만 분명히 그 점에 대해서는 신용이 필요합니다 - svg 이미지는 코드를 belo로 게시), 중앙 원과 그 주위를 둘러싼 7 개의 원이있는 이미지. 주변 원 중 하나를 클릭하면 정보가있는 영역이 왼쪽에 표시되고 그 원은 다른 상호 의존 원과 함께 확대됩니다. 지금까지 나는 애니메이션 svg에 대한 경험이 없지만 배울 열망합니다.
무엇부터 나는 <object> 태그를 사용하여 svg를 임베드한다고 가정하지만 svg 클릭 가능 개체 내에서 별도의 개체를 만들어야합니다. 그래서 내가 더 나은 내 HTML 내의 요소를 제어 할 수 있도록 내부의 모든 코드로 <svg>을 사용하기로 결정 :
`클릭 가능한 객체로 svg을 만드는 가장 좋은 방법은 무엇입니까
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Laag_1" x="0px" y="0px" viewBox="0 0 282.7 273.8" enable-background="new 0 0 282.7 273.8" xml:space="preserve">
<g>
<circle fill="none" stroke="#07A2D3" stroke-miterlimit="10" stroke-dasharray="1.998,1.998" cx="141.7" cy="137.5" r="95.4"/>
<rect class="btn" x="0" y="0" width="100" height="100" onclick="function(){};" />
</g>
<circle fill="#07A2D3" cx="141.7" cy="137.5" r="48.3"/>
<circle fill="#B1DEEA" cx="141.7" cy="43.9" r="27.7"/>
<circle fill="#B1DEEA" cx="68.4" cy="79.3" r="27.7"/>
<circle fill="#B1DEEA" cx="50.5" cy="158.5" r="27.7"/>
<circle fill="#B1DEEA" cx="101.4" cy="221.9" r="27.7"/>
<circle fill="#B1DEEA" cx="182.7" cy="221.6" r="27.7"/>
<circle fill="#B1DEEA" cx="233" cy="157.7" r="27.7"/>
<circle fill="#B1DEEA" cx="214.4" cy="78.6" r="27.7"/>
<text transform="matrix(1 0 0 1 125.8164 134.4912)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">digital</tspan><tspan x="-10" y="14.4" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="12">revolution</tspan></text>
<text transform="matrix(1 0 0 1 126.6628 47.0657)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">mobility</text>
<text transform="matrix(1 0 0 1 204.0706 81.8103)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">cloud</text>
<text transform="matrix(1 0 0 1 218.6055 160.0701)" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">big data</text>
<text transform="matrix(1 0 0 1 162.8337 214.0465)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="-2" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">application</tspan><tspan x="-1.9" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">integration</tspan></text>
<text transform="matrix(1 0 0 1 86.6699 216.3144)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">content</tspan><tspan x="-10.6" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">management</tspan></text>
<text transform="matrix(1 0 0 1 31.4218 155.9787)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">enterprise</tspan><tspan x="7.9" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">portal</tspan></text>
<text transform="matrix(1 0 0 1 60.4614 69.8347)"><tspan x="0" y="0" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">user</tspan><tspan x="-12.7" y="10.8" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">experience</tspan><tspan x="-4.7" y="21.6" fill="#FFFFFF" font-family="'MyriadPro-Regular'" font-size="9">design</tspan></text>
</svg>
`
그냥 <a> -link 이러한 개체 중 하나를 둘러싸 doesn''t는 내가 오버레이로서 transparant 한 버튼을 사용하기 위해, <rect class="btn" x="0" y="0" width="100" height="100" /> (이 포스트에서 RGB의 예의 : Making an svg image object clickable with onclick, avoiding absolute positioning)
를 사용하는 다른 방법을 집어 들었던 것처럼 보인다. 내가 여기에서 경험하고있는 문제는 i이다 ~ 할 수 없다. t는 내 svg 위에 tranparent 버튼, 9999의 Z- 인덱스를 사용할 때조차도 아닙니다.
나는 일을 시도하는 중간에 있지만 내 질문은 이것입니다. 이것은 당신에게 가장 좋은 관행에 따라 또는 다른 방향으로 보는 것이 좋습니다? 맨손으로 클릭하면 svg objcets에 CSS 애니메이션을 사용하고 싶습니다.
조언 해 주셔서 감사합니다.
코드를 추가하면 훨씬 명확 해집니다. –