javascript - 如何在VML中访问Raphael填充图像

我想访问在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中，填充图像是使用模式元素提供的。这就是为什么我要获取此元素，并且可以轻松访问其href属性。

VML完全不同。使用shape元素创建路径，该shape元素内部具有fill元素。但是不幸的是fill元素没有任何属性：/

有人可以帮助我访问VML填充图像元素吗？

最佳答案

我找到了解决方案。我编辑了上面的部分代码：

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 ...因此您需要解析它。

另一个问题是$.parseXML不适用于此XML ...（IE7和IE8），所以我不得不以某种方式自己解析它（这只是快速解决方案-我相信您可以将其解析得更好以用于生产）。

最后一件事是$(html)返回由6个元素组成的数组（而不是3个！），因为由于某种原因，它分别处理结束标签。这就是为什么我要遍历元素的$(html)组并搜索fill标签的原因。

这种方法的最大问题是我的解决方案是只读的。您无法更改图像的来源并轻松将其保存回去……您也无法轻松更改其大小。如示例末尾所示，您将不得不用XML进行更改并将其保存回path元素。

关于javascript - 如何在VML中访问Raphael填充图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14371038/