SVG图形图像处理答案

【问题标题】：SVG graphics image manipulationSVG图形图像处理
【发布时间】：2019-05-31 12:00:21
【问题描述】：

我在我的页面上创建了一个 SVG 元素。为此，我以编程方式附加了一个标签。我已经按照 MDN 页面中的建议设置了属性，但仍然没有显示任何内容。

代码如下：

function makeDesk(desk) {
    var url = "./images/Desks/desk" + desk.deskType + ".png"
    var img = document.createElement("image");
    img.id = "desk_" + desk.id;


    $(img).addClass("deskImg");

    $(img).attr("transform", 'rotate(' + desk.rotation + 'deg)');
    $(img).attr("href", url);
    $(img).attr("y", desk.y + "px");
    $(img).attr("x", desk.x + "px");
    $(img).attr("height", desk.height + 'px');
    $(img).attr("width", desk.width + 'px');
    //    img.draggable = 'true';
    $("#desk_svg")[0].appendChild(img);


} //makeDesk

这些是我在页面上得到的结果：

<svg id="desk_svg" width="1275px" height="986px">
<image id="desk_2" class="deskImg" transform="rotate(90deg)" href="./images/Desks/desk1.png" y="552px" x="395px" height="30px" width="50px"></image>
</svg>

所以我的问题是我哪里错了？我以前从未使用过 SVG，所以这将是一段漫长的经历。我正在从画布传输到 SVG，因为我需要能够单击插入的图像。

谢谢。

【问题讨论】：

标签： html image svg

【解决方案1】：

要创建 SVG 元素，您需要使用 createElementNS。还要设置一些 SVG 属性，例如 xlink:href，您需要使用 setAttributeNS

此外，在 SVG 中，变换看起来不同。我使用了transform="rotate(90,420,577)"，其中 90 是以度为单位的旋转，420 是旋转中心的 x，577 是旋转中心的 y。 x 和 y 是可选项，默认为 0。

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink"
function makeDesk(desk) {
    var url = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png"
    var img = document.createElementNS(SVG_NS,"image");
    img.id = "desk_" + desk.id;


    img.classList.add("deskImg");
    let rotX = desk.x + desk.width/2;
    let rotY = desk.y + desk.height/2;
    img.setAttributeNS(null,"transform", 'rotate(' + desk.rotation + ','+rotX+','+rotY+')');
    img.setAttributeNS(SVG_XLINK, 'xlink:href', url);
    img.setAttribute("y", desk.y + "px");
    img.setAttribute("x", desk.x + "px");
    img.setAttribute("height", desk.height + 'px');
    img.setAttribute("width", desk.width + 'px');
    //    img.draggable = 'true';
    $("#desk_svg")[0].appendChild(img);


} //makeDesk

let desk = {id:5,rotation:45,y:100,x:100,width:100,height:100}
makeDesk(desk)

svg{border:1px solid; width:100vh}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg id="desk_svg" viewBox="0 0 1275 986">
 
<image id="desk_2" class="deskImg" transform="rotate(90,420,577)" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.png" y="552" x="395" height="50" width="50"></image>
</svg>

【讨论】：

【解决方案2】：

我从 SVG 切换到画布，并通过创建第二个相同尺寸的隐藏画布来启用对画布的点击，并使用自定义颜色在相同位置发布一个对象。从那里我可以通过比较点击坐标处的颜色来检测点击了哪个对象。该项目现在运行良好。

【讨论】：

【解决方案3】：

我认为 jQuery 和 SVG 不能很好地结合在一起。更改类和设置属性等某些操作并非对所有元素都有效。

查看 kbwood.au 的帖子： https://forum.jquery.com/topic/change-an-attribute-of-an-svg-shape-using-jquery

您可以使用 vanilla javascript 或寻找修复该行为的插件。

例如：

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

https://svgjs.dev/docs/2.7/

【讨论】：