mia 發問時間: 電腦與網際網路程式設計 · 1 0 年前

SVG語法請幫忙一下

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">

<script type="text/ecmascript"><![CDATA[

function removeFill(evt) {

var element = evt.target;

if (element.hasAttributeNS(null,"fill")) {

element.removeAttributeNS(null,"fill");

}

else {

alert("This element doesn't have a fill attribute.");

}

}

]]></script>

<g id="firstGroup">

<rect width="70" height="50" x="40" y="5" fill="blue" onclick="removeFill(evt)"/>

<text x="150" y="30">Click on rectangle<tspan x="150" dy="15">to remove it's color.</tspan></text>

</g>

</svg>

請問上面這段語法,假如我要把它方塊點擊第二次時變色改成變回原本的藍色<第一次點擊方塊會變黑色>,而不是出現This element doesn't have a fill attribute,我要怎麼修改?還有能用其他方式代替滑鼠點擊它才會變色

例如:我要從別的地方讀檔案,然後這段語法中間可以依檔案的需求自己變色嗎?

1 個解答

評分
  • mh
    Lv 7
    1 0 年前
    最佳解答

    1. svg 改:

    1.1.

    <script type="text/ecmascript"><![CDATA[

    function changeFill(evt) {

    var element = evt.target;

    if (element.hasAttributeNS(null,"fill")) {

    (element.getAttributeNS(null,"fill")=='blue')? (element.setAttributeNS(null,"fill",'black')):(element.setAttributeNS(null,"fill",'blue'));

    }

    else {

    alert("This element doesn't have a fill attribute.");

    }

    }

    ]]></script>

    1.2.

    <rect width="70" height="50" x="40" y="5" fill="blue" onclick="changeFill(evt)"/>

    2. 當然可以。照參考資料寫了一個:

    2.1. svg:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg...

    <svg onload="init(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">

    <script type="text/ecmascript"><![CDATA[

    svgDoc = null;

    top.changeFillColor = ChangeFillColor;

    function init(evt) {

    svgDoc = evt.target.ownerDocument;

    }

    function ChangeFillColor(color) {

    svgDoc.getElementById("rect1").setAttribute("fill",color);

    top.updateCurrentFill(svgDoc.getElementById("rect1").getAttribute("fill"));

    }

    ]]></script>

    <g id="firstGroup">

    <rect id="rect1" width="70" height="50" x="40" y="5" fill="blue" />

    </g>

    </svg>

    2.2. 外部 HTML 部分:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>TEST</title>

    <script type="text/javascript">

    var iframeColorNow=null;

    function updateCurrentFill(color) { iframeColorNow=color; }

    function p_cfc() {

    (iframeColorNow=='blue')?(window.changeFillColor('red')):(window.changeFillColor('blue'));

    }

    </script>

    </head>

    <body>

    <iframe src="test.svg" type="image/svg+xml" width="300" height="300" />

    <form name="inputform">

    <input type="button" value="change fill color" onclick="p_cfc()" />

    </form>

    </body>

    </html>

    • Commenter avatar登入以對解答發表意見
還有問題?馬上發問,尋求解答。