用于点标记的 SVG - 什么格式的 SVG 有效？

Question

我简化了here的示例，为点标记绘制一个 svg（图片），如下所示：

但是尝试用另一个路径（图2）替换 SVG 路径会导致：

它应该显示一棵圣诞树：

这是列表中两个 svg 的代码，似乎工作的间距不同？

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": ""}},
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {"country": "Great Britain", "animal": "pic", "col": 3}
    ]
  },
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "col", "type": "ordinal", "axis": null},
    "y": {"field": "animal", "type": "ordinal", "axis": null},
    "row": {"field": "country", "header": {"title": ""}},
    "shape": {
      "field": "animal",
      "type": "nominal",
      "scale": {
        "domain": ["pic", "pic2"],
        "range": [
          "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z",
          "M256 0L266.969 30.766L299.641 31.703L273.766 51.656L282.969 83L256 64.563L229.031 83L238.234 51.656L212.359 31.703L245.016 30.766z M387.281 405.297L327.781 313.344L361.016 313.344L301.203 220.875L334.094 220.875L256 100.156L177.906 220.875L210.781 220.875L150.984 313.344L184.219 313.344L124.719 405.297z M229.328 430.313h53.344v81.688H229.328Z"
        ]
      },
      "legend": null
    },
    "opacity": {"value": 1},
    "size": {"value": 200}
  }
}

Answer 1

它确实显示了一棵圣诞树，不是吗？如果您谈论的是大小和位置，那么它们会在 SVG 中进行编码。您可以将 SVG 代码粘贴到编辑器中，如下所示：https://editor.method.ac/ 并以不同方式调整大小或位置。

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <title>Drawing</title>

 <g id="Layer_1">
  <title>Layer 1</title>
  <path d="m173.00001,16l4.03405,11.31476l12.01573,0.3446l-9.51601,7.33808l3.38457,11.52733l-9.91835,-6.78055l-9.91835,6.78055l3.38457,-11.52733l-9.51601,-7.33808l12.01021,-0.3446l4.03957,-11.31476l0.00002,0zm48.281,149.05543l-21.88222,-33.81741l12.22278,0l-21.99733,-34.00718l12.09627,0l-28.72051,-44.39663l-28.72051,44.39663l12.09039,0l-21.99145,34.00718l12.22278,0l-21.88222,33.81741l96.56201,0l0.00001,0zm-58.09012,9.20009l19.61824,0l0,30.04227l-19.61824,0l0,-30.04227z" id="svg_3" stroke="#000" fill="none"/>
 </g>
</svg>