jQuery不支持SVG

所以我想用图片填充SVG文本的背景。如果我将它设置在SVG代码中，它可以正常工作。但我想单击一个按钮，然后将它应用到文本的图像背景。 Here is a fiddle containing all of the code.jQuery不支持SVG

下面是代码反正

<body> 

<button>Text</button> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs>        
     <pattern id="patt1" patternUnits="userSpaceOnUse" width="10" height="10"> 
      <image xlink:href="http://dunnrite.co.uk/Images/pattern1.jpg" width="10" height="10" /> 
     </pattern> 
    </defs> 

    <text x="20" y="170">Your words here</text> 
</svg>

$(document).ready(function(){ 
$("button").click (function() { 
    $("text").css("fill", "url(#patt1)"); 
});

}）;

感谢

来源

2014-09-12 thinkrite

在这里工作很好http://jsfiddle.net/xWNR3/102/ – 2014-09-12 10:46:27

@MohitArora无法使用最新的稳定铬...现在是 – Mardoxx 2014-09-12 10:46:57

@Mardoxx你检查了我的演示吗？ – 2014-09-12 10:48:57

有两个问题与提琴：

您不包括jQuery的。
您的SVG元素与按钮重叠，因此该按钮位于SVG后面，无法点击。

在CSS中删除position: absolute; top: 0;或将其放置在某个地方而不重叠。

例如像这样

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" > 
<!-- rest of svg code --> 
</svg>

和

svg { 
    width:100%; 
    height:100%; 
}

Example Fiddle

如果你想看到你的自我，加

background-color: yellow;

添加到SVG的CSS并比较两个小提琴。

来源

2014-09-12 10:50:38 Sirko

谢谢，工作完美。 – thinkrite 2014-09-13 11:42:37

jQuery不支持SVG

回答

相关问题