1

塗りつぶし画像を VML に格納する VML 要素にアクセスしたい。以下にデモコードを貼り付けました。raphael.jsとjquery.jsを含めた場合にのみ機能することに注意してください。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Raphael Test</title>

        <script type="text/javascript" src="js/libs/jquery.js"></script>
        <script type="text/javascript" src="js/libs/raphael.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                var raphael, path, pattern;

                raphael = Raphael(document.getElementById('raphael'), 500, 500);

                path = raphael.circle(100, 100, 80);
                path.attr('stroke-width', 3);
                path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
                pattern = $(path.node).attr('fill');
                if(pattern) {
                    pattern = pattern.replace('url(', '').replace(')', '');
                    pattern = $(pattern);
                }

                // Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
                // Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx

                if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/
                    console.log($(path.node).find('fill').attr('href'));
                }
                else { // SVG supported and it prints correct URL
                    console.log($(pattern).find('image').attr('href'));
                }
            });
        </script>

    </head>
    <body>
        <div id="raphael"></div>
    </body>
</html>

SVG では、pattern 要素を使用して塗りつぶし画像が提供されます。そのため、この要素を取得していて、その href 属性に簡単にアクセスできます。

VML はかなり異なります。パスは、内部に fill 要素を持つ shape 要素で作成されます。残念ながら、fill 要素には属性がありません:/

VML 塗りつぶし画像要素にアクセスするのを手伝ってくれる人はいますか?

4

1 に答える 1

1

解決策を見つけました。上記のコードの一部を編集しました：

if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/

    var html = $(path.node).html();
    html = html.replace(/rvml:/g, ''); // remove prefix
    html = html.replace(/ = /g, '=');
    html = html.substr(html.indexOf('/>') + 2); // remove xml element

    var src = '';
    $(html).each(function() {
        if($(this).prop("tagName") == 'FILL') {
            src = $(this).attr('src');
        }
    });

    if(src != '') {
        var html = $(path.node).html();
        html = html.replace(src, src + '" size="50,50');
        $(path.node).html(html);
    }
}
else { // SVG supported and it prints correct URL
    console.log($(pattern).find('image').attr('href'));
}

まず最初に$(path.node).html()XML を返します...したがって、それを解析する必要があります。

もう 1 つの問題は、$.parseXMLこの XML では機能しないことです... (IE7 および IE8) それで、どうにかして自分で解析する必要がありました (これは簡単な解決策です。本番用に解析する方がはるかに優れていると確信しています)。

最後$(html)に、何らかの理由で終了タグを個別に処理するため、6 つの要素 (3 つではありません!) の配列を返します。そのため、一連の要素をループして$(html)、塗りつぶしタグを探しています。

このアプローチの最大の問題は、私のソリューションが読み取り専用であることです。画像のソースを変更して簡単に保存することはできません...サイズも簡単に変更できません。例の最後にあるように、XML で変更してパス要素に保存する必要があります。

于 2013-01-17T03:27:10.907 に答える