Question

我正在使用svg编写向右箭头和向下箭头。 右箭头可以在以下代码中正常工作：

<svg width="20px" height="40px">
      <defs>
        <marker
          id="right-arrow"
          markerWidth="4"
          markerHeight="8"
          refX="0"
          refY="1"
          viewBox="0 0 1 2"
        >
          <polygon points="0,0 1,1 0,2" fill="#3273dc" stroke="none" />
        </marker>
      </defs>
      <line
        x1="0"
        y1="50%"
        x2="100%"
        y2="50%"
        strokeWidth="2"
        markerEnd="url(#right-arrow)"
        stroke="#3273dc"
      />
    </svg>

当我尝试将此箭头更改为向下箭头时，使用此代码的箭头提示输入错误：

<svg width="20px" height="20px">
      <defs>
        <marker
          id="down-arrow"
          markerWidth="4"
          markerHeight="8"
          refX="0"
          refY="1"
          viewBox="0 0 1 2"
          orient="auto-start-reverse"
        >
          <polygon points="0,0 2,2 2,0" fill="#3273dc" stroke="none" />
        </marker>
      </defs>
      <line
        x1="50%"
        y1="0"
        x2="50%"
        y2="100%"
        strokeWidth="2"
        markerEnd="url(#down-arrow)"
        stroke="#3273dc"
      />
    </svg>

我的向下箭头代码有什么问题？

Answer 1

更改向下箭头的多边形点：

更改

points="0,0 2,2 2,0"

上面在viewBox中说：

移至x = 0，y = 0
然后绘制到x = 2，y = 2（对角向下）
然后吸引到x = 2，y = 0（有点奇怪）

收件人

points="0,0 0,2 1,2"

上面在viewBox中说：

移至x = 0，y = 0
然后吸引到x = 0，y = 2（对边）
然后绘制到x = 1，y = 2（对角向下到中心点）

您可以在SVG specification on polygons中看到此模式，该模式描述了如何像路径一样绘制多边形。路径的SVG规范具有down arrow example

Answer 2

您不需要其他标记。可以使用right-arrow。问题是标记太小。为了能够看到标记，我将颜色更改为红色。同样，由于您的行从0％变为100％，因此标记位于svg画布之外。我将其更改为90％。

您还在使用markerEnd，我将其更改为marker-end

<svg viewBox="0 0 200 200">
      <defs>
       <marker
          id="right-arrow"
          markerWidth="2"
          markerHeight="4"
          refX="0"
          refY="1"
          orient="auto"
        >
          <polygon points="0,0 1,1 0,2" fill="red" stroke="none" />
        </marker>
        
      </defs>
      <line
        x1="0"
        y1="50%"
        x2="90%"
        y2="50%"
        strokeWidth="2"
        marker-end="url(#right-arrow)"
        stroke="#3273dc"
      />
    </svg>




<svg viewBox="0 0 200 200" >
     
      <line
        x1="50%"
        y1="0"
        x2="50%"
        y2="90%"
        strokeWidth="2"
        marker-end="url(#right-arrow)"
        stroke="#3273dc"
        orient="auto-start-reverse"
      />
  

    </svg>

SVG向下箭头无法正确呈现

2 个答案: