HTML+JS开发抽奖转盘组件替换SVG箭头为PNG指针问题咨询

解决方案 #

你之前添加图片不生效的核心原因是：在SVG容器内插入图片需要使用SVG标准的<image>标签，且D3 v3版本需要用xlink:href属性指定图片路径，不能直接用普通HTML的img标签或者src属性。

替换步骤 #

找到你代码里//make arrow注释后的所有代码，直接替换为以下内容即可：

// 替换为needle.png指针
svg.append("g")
    // 定位到转盘正上方位置，可微调前后两个数值调整指针位置
    .attr("transform", "translate(" + (w / 2 + padding.left) + "," + padding.top + ")")
    .append("image")
    // 替换为你本地needle.png的实际路径
    .attr("xlink:href", "./needle.png")
    // 按你的图片实际尺寸调整宽高
    .attr("width", 30)
    .attr("height", 30)
    // 横向偏移为宽度的一半，保证指针居中对准转盘
    .attr("x", -15)
    // 纵向偏移可调整，让指针尖刚好落在转盘边缘的分割线上
    .attr("y", 0);

注意事项 #

• 如果指针方向不对，可在transform属性后追加旋转参数，比如指针默认朝上要改成朝下就写：attr("transform", "translate(xxx,xxx) rotate(180)")
• 确认图片路径正确，若html文件和图片不在同一级目录，要对应修改xlink:href的路径值
• 宽高和偏移数值可根据你实际的图片大小灵活调整，直到指针位置符合预期即可

内容的提问来源于stack exchange，提问作者Arvind Kumar Jha