如何使用 jQuery SVG 插件设置 SVG 矩形元素的背景图像? [英] How to set a SVG rect element's background image with jQuery SVG plugin?

问题描述

我使用 keith-wood 的 jQuery SVG 插件创建了一个 SVG 矩形.代码如下:

I created a SVG rect using keith-wood's jQuery SVG plugin. Here is the code:

svg.graph._wrapper.rect(group, 0, 100, 40, 20,
                       {fill: 'ivory',
                        stroke: 'black',
                        strokeWidth : 2});

所以我认为我可以轻松更改填充而不是使用象牙"，我将其更改为theImageIwantToUse".但它似乎不起作用.

So I thought I could easily change the fill instead of using 'ivory', I changed it to 'theImageIwantToUse'. But it does not seem to work.

推荐答案

您可以使用 <image> 元素在您的 svg 中插入图片 http://www.w3.org/TR/SVG/struct.html#ImageElement

You can insert images in your svg by using the <image> element http://www.w3.org/TR/SVG/struct.html#ImageElement

您提到的插件中提供了适当的功能.

An appropriate function is available in the plugin you mentioned.

svg.image(parent, x, y, width, height, ref, settings)  

( http://keith-wood.name/svg.html )

我怀疑是否可以在图像中使用笔触，因此您必须在绘制图像后绘制一个没有填充的矩形以获得您想要的确切结果.

I doubt it's possible to use stroke in an image so you'll have to draw a rectangle with no fill after drawing the image to get the exact result you want.

这篇关于如何使用 jQuery SVG 插件设置 SVG 矩形元素的背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！