Question

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

无论如何这是代码

<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)");
});

}）;

由于

Answer 1

你的小提琴有两个问题：

您没有包含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并比较两个小提琴。

jQuery没有使用SVG

1 个答案: