Kevin Powell - Community•9mo ago

SVG and position absolute.

Hi, I would like to acomplish the design shown in image but with ability to use width 100% so it is responsive. The arrow is svg. And if I could I would like to in the end animate it that the line shortens on hover to the right, but I didnt yet get to it becose it didnt work in first place.

<svg xmlns="http://www.w3.org/2000/svg" height="50">
  <!-- Define an arrowhead marker -->
  <defs>
    <marker
      id="arrowhead"
      viewBox="-4 -4 28 28"
      markerWidth="20"
      markerHeight="20"
      refX="10"
      refY="10"
      orient="auto"
    >
      <path
        fill="none"
        stroke="rgb(155, 23, 23)"
        stroke-width="3"
        d="m 0 0 l 10 10 l -10 10 "
      />
    </marker>
  </defs>

  <line
    x1="0"
    y1="24"
    x2="90%"
    y2="24"
    stroke="rgb(155, 23, 23)"
    stroke-width="3"
    marker-end="url(#arrowhead)"
  />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" height="50">
  <!-- Define an arrowhead marker -->
  <defs>
    <marker
      id="arrowhead"
      viewBox="-4 -4 28 28"
      markerWidth="20"
      markerHeight="20"
      refX="10"
      refY="10"
      orient="auto"
    >
      <path
        fill="none"
        stroke="rgb(155, 23, 23)"
        stroke-width="3"
        d="m 0 0 l 10 10 l -10 10 "
      />
    </marker>
  </defs>

  <line
    x1="0"
    y1="24"
    x2="90%"
    y2="24"
    stroke="rgb(155, 23, 23)"
    stroke-width="3"
    marker-end="url(#arrowhead)"
  />
</svg>

<div>
            <object
              type="image/svg+xml"
              data="/assets/ico/arrow-icon.svg"
              class="arrow"
            ></object>
            <h5>Realitka</h5>
            <p>Prodej a správa nemovitostí</p>
          </div>

<div>
            <object
              type="image/svg+xml"
              data="/assets/ico/arrow-icon.svg"
              class="arrow"
            ></object>
            <h5>Realitka</h5>
            <p>Prodej a správa nemovitostí</p>
          </div>

.arrow {
    padding: 0;
    margin: 0;
    position: absolute;
    // width: 100%;
    padding-top: calc(var(--step-1) - 18px);
    z-index: -1;
  }

.arrow {
    padding: 0;
    margin: 0;
    position: absolute;
    // width: 100%;
    padding-top: calc(var(--step-1) - 18px);
    z-index: -1;
  }

1 Reply

ἔρως•9mo ago

why don't you implement everything in an svg, if it is supposed to be always a "block"?

Gaming

Programming

SVG and position absolute.