波浪形按钮形状，里面有文字

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>

关于如何将文本整合到形状中并为 shape/button 添加悬停状态有什么想法吗？

谢谢！

Answer 1

我建议将 svg 路径和 svg 内的文本 'add to cart' 分组（使用 "g" 元素）。我还猜测您希望整个按钮充当 link，因此我建议按如下方式构建 HTML：

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

...并使用 x 和 y 值将路径和文本定位在组内。然后，当整个 link 像这样悬停时，您可以定位路径和文本：

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

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

Answer 2

您可以通过多种方式实现。

您可以使用 <text> 元素将文本移动到 SVG 中...

a.test:hover svg path {
  fill: red;
}

<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>

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

.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;
}

<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>

波浪形按钮形状，里面有文字

wavy button shape with text inside

html

css

svg

shape

button