Question

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

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

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或精灵的经验，但是从我有限的研究来看，似乎有两种方法。显示背景图像以指向精灵表并使用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);

我通过在前面的代码中添加另一行来将clip-path应用为属性：

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

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

Answer 1

此行不正确。

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。

使用精灵动态生成的SVG？

1 个答案: