0

我正在尝试采用一些现有的 javascript 来生成 SVG 元素并使用精灵表而不是单独的 png。

现在这是生成图像的一般格式，其中“路径”指向单个图像的文件：

var hsOwnerDocument = $$(this).getDocument();
var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "image");
element.id = id;
element.setAttributeNS(null, "x", left);
element.setAttributeNS(null, "y", top);
element.setAttributeNS(null, "width", width);
element.setAttributeNS(null, "height", height);
element.setAttributeNS("http://www.w3.org/1999/xlink", "href", path);

我没有使用 SVG 或 sprite 的经验，但从我有限的研究来看，似乎有两种方法。显示背景图像以指向精灵表并使用 CSS 获取您需要的部分，或在图像上使用剪辑路径属性。鉴于我的问题，我不确定哪个是合适的，但不幸的是，两者似乎都没有像我预期的那样工作。剪辑路径似乎不适用于图像元素，如果我使用背景图像，它实际上根本不会显示。

编辑：使用剪辑路径，我刚刚创建了一个小于我的图像的任意矩形，并将其应用于我上面的图像，看看这是否会根据我的需要过滤一个区域。

    var hsOwnerDocument = $$(this).getDocument();
    var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "clip-path");
    element.id = "testClip";
    element.setAttributeNS(null, "id", "testClip");
    var rect = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg", "rect");
    rect.setAttributeNS(null, "x", 4);
    rect.setAttributeNS(null, "y", 4);
    rect.setAttributeNS(null, "width", 20);
    rect.setAttributeNS(null, "height", 20);
    element.appendChild(rect);

我通过在前面的代码中添加另一行来应用剪辑路径作为属性：

element.setAttributeNS(null,"style", "clip-path:url(#testClip)");

剪辑路径元素和子矩形都出现在生成的标记中，我在我的图像元素上看到了该属性......但仍然显示完整图像。

4

1 回答 1

0

此行不正确。

var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg",
                                              "clip-path");

您需要创建一个 clipPath 元素。

var element = hsOwnerDocument.createElementNS("http://www.w3.org/2000/svg",
                                              "clipPath");

属性是clip-path，元素是clipPath。

于 2013-09-27T14:42:21.813 回答