Question

来源：https://codepen.io/joondoe/pen/yLBMXPX?editors=1100

我会知道为什么我的圆圈无法完全显示，因为有足够的空间可以完全显示它。

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
 font-family: 'PT Sans', sans-serif;
 padding: 2rem;
}

<h2>Beginning SVG: Drawing paths and marker</h2>

<svg width="1000" height="1000" >
  <defs>
    <marker 
       id="circle1" markerWidth="385" markerHeight="359"
       refX="15" refY="5"
       orient="auto"    
    >
      <circle cx="15" cy="5" r="13" fill="black"/>
      <circle cx="15" cy="5" r="12" fill="lightgray"/>
      <path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
    </marker>
  </defs>
  <line 
        x1="100" y1="220" x2="250" y2="200"
        stroke="black" stroke-width="5"
        marker-end="url(#circle1)"
  />
</svg>

Answer 1

标记在其图块的边界处具有一个矩形的裁剪区域。在您的情况下为0,0到385，359，因此您需要在该矩形内绘制标记。

一个cy =“ 5”和r =“ 13”的圆将在y轴上方渲染，因此在裁剪矩形的外部。

我们可以简单地翻译标记内容，然后移动标记refY进行补偿。我也将markerWidth和markerHeight设置为更合理的值，因为它们太大会阻止浏览器优化标记渲染。

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
body {
 font-family: 'PT Sans', sans-serif;
 padding: 2rem;
}

<h2>Beginning SVG: Drawing paths and marker</h2>

<svg width="1000" height="1000" viewBox="0 0 2000 2000">
  <defs>
    <marker 
       id="circle1" markerWidth="40" markerHeight="40"
       refX="15" refY="25"
       orient="auto" 
    >
      <g transform="translate(0,20)">
      <circle cx="15" cy="5" r="13" fill="black"/>
      <circle cx="15" cy="5" r="12" fill="lightgray"/>
      <path d="M 4,3.5 L 6.5,5 L4,6.5 Z" fill="slategray"/>
      </g>
    </marker>
  </defs>
  <line 
        x1="100" y1="220" x2="250" y2="200"
        stroke="black" stroke-width="5"
        marker-end="url(#circle1)"
  />
</svg>

为什么我的圈子标记没有完全显示？

1 个答案: