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 中，填充图像是使用模式元素提供的。这就是我获取这个元素的原因，我可以轻松访问它的 href 属性。

VML 完全不同。路径是用 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 ......所以你需要解析它。

另一个问题是它$.parseXML不适用于这个 XML...（IE7 和 IE8）所以我不得不自己解析它（这只是一个快速的解决方案——我相信你可以更好地解析它以用于生产）。

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

这种方法的最大问题是我的解决方案是只读的。您无法更改图像的来源并轻松将其保存回来......您也无法轻松更改其大小。您必须在 XML 中更改它并将其保存回路径元素，因为它位于示例的末尾。

于 2013-01-17T03:27:10.907 回答