SVG 확대/축소와 삽입 태그 테스트

설명

SVG 파일 안에 포함된 CSS는 원의 외곽선 컬러를 검정색에서 젖은 아스팔트색으로 바꾼다. SVG 안에 있는 스크립트는 원의 색깔을 금색에서 에메랄드 색으로 바꾼다. 스크립트가 작동한 이후에도 마우스를 원 위에 올리면 색이 변한다. CSS3 transition 속성으로 색이 변할 때는 0.3초 동안 은은하게 변하도록 했다.

img 태그로 포함한 svg 원의 색은 변하지 않는다. 따라서 우리는 img 태그에 포함된 SVG에서 스크립트가 작동하지 않는다는 것을 알 수 있다.

아래 예제에는 높이를 지정한 것과 지정하지 않은 것이 있다. heightauto로 했을 때, 무슨 일이 벌어지는 지 알 수 있을 것이다.

SVG에는 viewBox속성이 필요하다. viewBox 속성을 생략하면 어떤 일이 벌어지는 지 보자.

모든 경우에 CSS는 적용되고, img 태그를 제외하고는 script도 적용된다.

모든 SVG 이미지는 a 태그로 둘러싸여 있다. 하지만 a 태그는 오직 인라인 SVG와 img 태그에서만 작동한다.

이제 아래 예제를 보자.

Code

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
        version="1.1" width="84px" height="84px" viewBox="0 0 84 84">
    <style type="text/css">
        .circle-obj {
            stroke: #34495E;
            transition: fill 0.3s;
            cursor: pointer;
        }
    </style>
    <desc>This is svg circle. You can see circle when use svg support browser.</desc>
    <circle class="circle-obj" cx="42" cy="42" r="40" stroke="#000" stroke-width="4" fill="gold"/>
    <script type="text/ecmascript"><![CDATA[
        (function () {
            function changeFill(dom) {
                if (dom.getAttribute('fill') === 'gold') {
                    dom.setAttribute('fill', '#2ECC71');
                } else {
                    dom.setAttribute('fill', 'gold');
                }
            }

            Array.prototype.forEach.call(document.getElementsByClassName('circle-obj'), function (el, i) {
                el.addEventListener('mouseover', function () {
                    changeFill(el);
                });
            });
        })();
    ]]></script>
</svg>

width 100px, height 100px, with viewBox

inline

This is svg circle. You can see circle when use svg support browser.

img

object

iframe

embed

width 100px, height 100px, without viewBox

inline

This is svg circle. You can see circle when use svg support browser.

img

object

iframe

embed

width 100px, height auto, with viewBox

inline

This is svg circle. You can see circle when use svg support browser.

img

object

iframe

embed

width 100px, height auto, without viewBox

inline

This is svg circle. You can see circle when use svg support browser.

img

object

iframe

embed