How do I scale specific points while leaving other points alone?

Ask a question
0

I have an SVG that was created with a single poly which is used for an anchor border. A problem I’m running into is that I would like the button to support variable content - allowing the button to resize horizontally as necessary to fit, while constraining the angle of the side lines.

I can’t seem to figure out if I need to somehow deal with splitting the original poly, adjusting the viewBox, or what. We’re stumped.

The inline SVG I’m using is fairly basic:

* { box-sizing: border-box; }

.btn {
  width: 198px;
  display: inline-block;
  background: transparent;
  margin: 2px 0;
  padding: 0;
  height: 41px;
  text-align: center;
  font-size: 10px;
  line-height: 41px;
  font-weight: 600;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  position: relative;
  transition: all ease-in-out 0.3s; }
  .btn.btnFluid {
    width: auto; }
    .btn.btnFluid svg {
      width: 100%;
      height: 41px; }
  .btn svg polygon {
    fill: #000;
    transition: fill 0.3s ease;
    stroke: #002b5d;
    stroke-width: 2; }
  .btn:hover {
    color: #000; }
    .btn:hover svg polygon {
      stroke: #000;
      fill: #FFF; }
  .btn span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 25px; }

svg:not(:root) {
  overflow: hidden; }
<a href="#" class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
   </svg>
  <span>Read More</span>
</a>
<br><br>
<a href="#" class="btn btnFluid">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80" preserveAspectRatio="none">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
  </svg>
  <span>A much longer cta button label</span>
</a>

I have created an editable demo here: https://jsfiddle.net/32wcq1zr/1/ — compare the side edge angle of the first button versus the second button. Ideally, I’d like to have the functionality of the second button but with a consistent angle of the side lines.

offer bounty
add comment

0 Answer

Your Answer