代码之家 › 专栏 › 技术社区 › 576i

如何定义一个模板来重用HTML/CSS中的SVG图形按钮?

svg css html

576i · 技术社区 · 5 年前

对于仪表板html页面,我需要很多带有“-”或“+”符号的圆形按钮。

按钮的外观如下:

下面的代码在Chromium中运行良好。

重复每个按钮的完整设计会使代码难以阅读。

对于每个按钮,只有 身份证件 以及文本 +/- 改变。

是否有方法将其定义为 按钮模板 和重用按钮?

<div class="item2" style="padding: 0px">
                <svg id="minus1" height="60" width="60">
                    <circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/>
                    <text x="15" y="48" fill="black" style="font-weight: bold;font-size: 50px;text-align: center;user-select: none">-</text>
                </svg>
            </div>
            <div class="item2" style="padding: 0px">
                <svg id="plus1" height="60" width="60">
                    <circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/>
                    <text x="15" y="48" fill="black" style="font-weight: bold;font-size: 50px;text-align: center;user-select: none">+</text>
                </svg>
            </div>
            <div class="item1"></div>

0 回复 | 直到 5 年前

Leo 5 年前

你能做什么

通过引用svg内容 id 具有 xlink:href 从a <use> 标签。

怎么做

将每个内容分组 <svg> 如果还没有,请将其合并到一个标签中,以便以后可以通过添加 身份证件 到它。
包装共享相同内容的分组内容 viewBox (在你的例子中,所有这些都是绑定的),变成一个单一的 <defs> tag,用于存储稍后使用的内容的标签。
把 <defs> 进入a <svg> 坚持这一点 viewBox 信息。
把决赛 <svg> 在你的 <body> (通常在顶部)。

例如。

经过一些修改的示例:

text {
  font-weight: bold;
  font-size: 50px;
}

.svg-container {
  height: 60px;
  width: 60px;
  user-select: none;
}

svg {
  height: 100%;
  width: 100%;
}

<body>
  <svg viewBox="0 0 60 60" style="display: none">
    <defs>
      <g id="minus">
        <circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/>
        <text x="21" y="44" fill="black">-</text>
      </g>
      <g id="plus">
        <circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="white"/>
        <text x="15" y="48" fill="black">+</text>
      </g>
    </defs>
  </svg>

  <!-- somewhere in your code -->
  <div class="svg-container">
    <svg>
      <use xlink:href="#minus" />
    </svg>
  </div>
  <div class="svg-container">
    <svg>
      <use xlink:href="#plus" />
    </svg>
  </div>
</body>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前