CODEWITHSUNDEEP
cssreactjssvg
cbll
cbll

Reputation: 7219

How do I make SVG level from center of polygon rather than bottom?

I have a rather simple svg icon for a dropdown button. I want to level it with the text from the dropdown button, so that the center of the text levels with the center of the svg polygon.

As of now, it levels with the bottom of the polygon.

The svg:

<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='#FFFFF'>
    <polygon
            opacity="0.5"
            points='0,0 100,0 50,50'
    />
</svg>

It is implemented as such(React styling) for a button element:

background: `url(${require("./assets/icons/select_downarrow.svg")}) no-repeat`,
backgroundSize: "10px",
backgroundPosition: "calc(100% - 15px) center",

It will "level" with the very buttom of the SVG arrow. I wish for it to level with the center of the polygon, is that possible to do from the SVG element itself, or will this have to be done by the styling?

Upvotes: 0

Views: 213

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101956

One easy way, is to set the line-height of your text to be the same height as your image. This works great as long as your text doesn't need to wrap.

button {
  background-color: #eeeeff;
}

svg {
  display: block;
  float: left;
  background-color: #ffffee;
}

span {
  line-height: 100px;
}
<button>

  <svg width="100" height="100" fill="#FFFFF">
    <polygon opacity="0.5" points="0,0 100,0 50,50" />
  </svg>
  
  <span>Some text here</span>

</button>

Upvotes: 1

Related Questions