Question

我正在尝试创建此按钮：

我正在使用SVG这样做，所以这是我的代码：

.svg-button { 
position:relative; 

}

a.test {
  
  display:block;
}

<div class="svg-button">

<?xml version="1.0" encoding="UTF-8"?>
<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
            <g id="Group-6" transform="translate(836.000000, 668.000000)">
                <g id="Group" transform="translate(151.000000, 111.000000)">
                    <path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
                </g>
            </g>
        </g>
    </g>

</svg>
    
    <a class="test" href="#">add to cart</a>

</div>

关于如何将文本整合到形状中并为形状/按钮添加悬停状态的任何想法？

谢谢！

Answer 1

我建议将svg路径和文字分组，然后添加到购物车＆＃39;在svg里面（带有＆＃34; g＆＃34;元素）。我还猜测你希望整个按钮充当链接，所以我建议按以下方式构建HTML：

<a>
  <svg>
    <g>
      <path></path>
      <text>Add to cart</text>
    </g>
  </svg>
</a>

...并使用x和y值定位组内的路径和文本。然后，当整个链接被徘徊时，您可以定位路径和文本：

a:hover svg g text {
  fill: red;
}
a:hover svg g path {
  stroke: red;
}

查看我为演示制作的这个简单的codepen，如果您有任何疑问，请告诉我！ https://codepen.io/segheysens/pen/VzbzeJ

Answer 2

有很多方法可以做到。

您可以使用a.test:hover svg path { fill: red; }元素...

将文本移动到SVG中

＆＃13;

<div class="svg-button">

<a class="test" href="#">

<svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
            <g id="Group-6" transform="translate(836.000000, 668.000000)">
                <g id="Group" transform="translate(151.000000, 111.000000)">
                    <path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
                </g>
            </g>
        </g>
    </g>

    <text x="75" y="27" text-anchor="middle">add to cart</text>

</svg>

</a>

</div>

＆＃13;

.svg-button { 
  position: relative; 
}

.svg-button svg,
.svg-button a { 
  position: absolute;
  display: block;
  width: 150px;
  height: 51px;
  top: 0;
}

.svg-button a { 
  text-align: center;
  line-height: 45px;
}

.svg-button:hover svg path {
  fill: red;
}

＆＃13;

或者如果您想将文本保留为HTML。您可以使用相对/绝对定位将文本居中在SVG上。

＆＃13;

<div class="svg-button">

  <svg width="150px" height="51px" viewBox="0 0 150 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD" transform="translate(-987.000000, -779.000000)" stroke="#102CCA">
            <g id="Group-6" transform="translate(836.000000, 668.000000)">
                <g id="Group" transform="translate(151.000000, 111.000000)">
                    <path d="M0.5,0.5 L0.5,47.4475413 C38.7946588,43.6370428 73.268313,43.6553687 103.92161,47.5038947 C134.273898,51.314629 149.5,49.8747765 149.5,43.6367187 L149.5,30.078125 C149.5,19.2695184 149.5,19.0898429 149.5,0.936176488 L0.5,0.5 Z" id="Rectangle"></path>
                </g>
            </g>
        </g>
    </g>

  </svg>
    
  <a class="test" href="#">add to cart</a>

</div>

＆＃13;

:imap jj <Esc>

＆＃13;

波浪形按钮形状与文本内

2 个答案: