htmlcsssvg

How to correct my SVG arrows so they point up and down and so the 'arrow' shapes are located on the ends of the arrow lines

enter image description here

Below is the HTML and CSS of a circle whose arrows should point opposite to each other towards the circumference of the circle ensuring it well inside the circle. Please find the example image attached. I want the arrow to be like example keeping the color theme same:

html, body {
    height: 100%;
    font-family: 'Roboto Mono', monospace;
    background-color: hsl(243, 12%, 29%);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawing {
    position: relative;
    width: 500px;
    height: 500px;
}

.circle-svg {
    width: 100%;
    height: 100%;
}

.c3 {
    fill: none;
    stroke: hsl(218, 38%, 76%);
    stroke-width: 5;
}

.vertical-line {
    stroke: hsl(0, 0%, 60%);
    stroke-width: 2;
}

.diameter-label {
    fill: hsl(0, 0%, 90%);
    font-size: 16px;
    font-weight: bold;
    alignment-baseline: middle;
}
<body>
    <div class="drawing">
        <svg viewBox="0 0 500 500" class="circle-svg">
            <defs>
                <!-- Arrowhead pointing up -->
                <marker id="arrow-up" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="0">
                    <path d="M0,10 L5,0 L10,10 Z" fill="hsl(0, 0%, 80%)"></path>
                </marker>
                <!-- Arrowhead pointing down -->
                <marker id="arrow-down" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
                    <path d="M0,0 L5,10 L10,0 Z" fill="hsl(0, 0%, 80%)"></path>
                </marker>
            </defs>
            <!-- Circle -->
            <circle class="c3" cx="250" cy="250" r="100"></circle>
            <!-- Vertical Lines with arrows -->
            <line class="vertical-line" x1="250" y1="150" x2="250" y2="250" marker-end="url(#arrow-down)"></line>
            <line class="vertical-line" x1="250" y1="250" x2="250" y2="350" marker-end="url(#arrow-up)"></line>
            <!-- Diameter Label -->
            <text x="250" y="245" class="diameter-label" text-anchor="middle">200 mm</text>
        </svg>
    </div>
</body>

Solution

  • You have to adjust orient property of the arrow to auto-start and auto-end.

        html, body {
      height: 100%;
      font-family: 'Roboto Mono', monospace;
      background-color: hsl(243, 12%, 29%);
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .drawing {
      position: relative;
      width: 500px;
      height: 500px;
    }

    .circle-svg {
      width: 100%;
      height: 100%;
    }

    .c3 {
      fill: none;
      stroke: #00395d; 
      stroke-width: 15;
    }

    .diameter-line {
      stroke: #ff7a00; 
      stroke-width: 5;
    }

    .diameter-label {
      fill: #ff7a00;
      font-size: 18px;
      font-weight: bold;
      alignment-baseline: middle;
    }
    <div class="drawing">
    <svg viewBox="0 0 500 500" class="circle-svg">
      <defs>
        
        <marker id="arrow-up" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-start">
          <path d="M0,10 L5,0 L10,10 Z" fill="#ff7a00"></path>
        </marker>
        
        <marker id="arrow-down" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto-end">
          <path d="M0,0 L5,10 L10,0 Z" fill="#ff7a00"></path>
        </marker>
      </defs>

      
      <circle class="c3" cx="250" cy="250" r="200"></circle>

      <line class="diameter-line" x1="250" y1="85" x2="250" y2="230" marker-start="url(#arrow-up)"></line>
      <line class="diameter-line" x1="250" y1="270" x2="250" y2="415" marker-end="url(#arrow-down)"></line>
      <text x="250" y="255" class="diameter-label" text-anchor="middle">ID</text>
    </svg>
  </div>