问题 jquery动态更改svg image xlink：href

我正在尝试动态更改多边形的填充图像而不是填充颜色。为此，我找到了一种将填充更改为图像的方法，但我无法将xlink：href URL动态更改为随机URL。有什么想法吗？谢谢你的帮助！

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="320px" height="480px" viewBox="0 0 320 480" enable-background="new 0 0 320 480" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10" 
 width="425" height="319">
    <image id="background" width="100%" height="100%" 
     xlink:href="http://www.w3.org/1999/xlink" />
</pattern>
<g id="Layer_1">
    <polygon class="background"  fill="url(#pat1)" points="265.188,329.922 160.198,358 55.208,329.922 55.208,120.868 265.188,120.868  "/>

</g>
<g id="Layer_2">
    <g id="brand_mark_1_">
        <g>
            <rect x="265.188" y="120.868" fill="#FFFFFF" width="23.812" height="44.378"/>
            <g>
                <path fill="#020304" d="M275.372,149.035c0,0.949,0.77,1.72,1.721,1.72c0.949,0,1.72-0.771,1.72-1.72      c0-0.023-0.003-0.044-0.004-0.066v-16.261c0.004-0.043,0.007-0.088,0.007-0.134c0-0.95-0.77-1.72-1.719-1.72      c-0.942,0-1.707,0.757-1.72,1.695h-0.005v16.461h0.001C275.374,149.017,275.372,149.025,275.372,149.035z"/>
                <circle fill="#F5170D" cx="277.093" cy="153.541" r="1.72"/>
            </g>
        </g>
    </g>
</g>
</svg>


 $(document).ready(function() {
                var randomColor = Math.floor(Math.random()*16777215).toString(16),
                    randomNumber = Math.floor((Math.random()*855)+48),
                    backg = $('#background');
                    $("body").css("background-color", randomColor);
                    backg.attr("http://www.w3.org/1999/xlink", "xlink:href","url(http://blob.apliiq.com/sitestorage/fabric/" + randomNumber + ".png)");
                    $('a#cta').attr("href", "/designyourown/?fabricID=" + randomNumber );               
            });

1832

2017-11-06 00:08

起源

答案:

如果你纠正，工作正常 backg.attr 功能属性。

$(document).ready(function () {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16),
        randomNumber = Math.floor((Math.random() * 855) + 48),
        backg = $('#background');
    $("body").css("background-color", '#' + randomColor);
    backg.attr("xlink:href", "http://blob.apliiq.com/sitestorage/fabric/" + randomNumber + ".png");
    $('a#cta').attr("href", "/designyourown/?fabricID=" + randomNumber);
});

JSFiddle链接： http://jsfiddle.net/arpitworld/jhetx/

2017-11-06 04:39

谢谢！我后来认识到我正在放置url（“在DOM中的xlink：href之后。这绝对有帮助，但很棒！ - Nate McConnell

答案:

如果你纠正，工作正常 backg.attr 功能属性。

$(document).ready(function () {
    var randomColor = Math.floor(Math.random() * 16777215).toString(16),
        randomNumber = Math.floor((Math.random() * 855) + 48),
        backg = $('#background');
    $("body").css("background-color", '#' + randomColor);
    backg.attr("xlink:href", "http://blob.apliiq.com/sitestorage/fabric/" + randomNumber + ".png");
    $('a#cta').attr("href", "/designyourown/?fabricID=" + randomNumber);
});

JSFiddle链接： http://jsfiddle.net/arpitworld/jhetx/

2017-11-06 04:39

谢谢！我后来认识到我正在放置url（“在DOM中的xlink：href之后。这绝对有帮助，但很棒！ - Nate McConnell

我试图在JavaScript（没有JQuery）中执行此操作，但它无法正常工作。对于那些在我的情况下偶然发现这一点的人，诀窍是打电话给 setAttributeNS 方法并指定 xlink 的命名空间 href 属性。例如：

document.getElementById('background').setAttributeNS(
    'http://www.w3.org/1999/xlink', 
    'xlink:href', 
    '<URL goes here>');

2017-09-13 12:16

经过几个小时的按摩后，我终于通过将URL（“”）保持在xlink之外来完成工作：href =“”唉！

$(document).ready(function() {
            var randomNumber = Math.floor((Math.random()*855)+48);
                $('#background').attr('xlink:href',"http://blob.apliiq.com/sitestorage/cropped-fabrics/" + randomNumber + "_573_465.jpg");              
        });

2017-11-06 04:54

问题 jquery动态更改svg image xlink：href

答案:

答案:

热门问题