文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >为什么“<使用xlink:href.”更改svg映像的行为？

问为什么“<使用xlink:href.”更改svg映像的行为？
EN

Stack Overflow用户
提问于 2022-05-03 12:20:49
回答 1查看 42关注 0票数 0

我正在研究以下代码：

​

代码语言：javascript
复制
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  color: #223254;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.cbx:not(:last-child) {
  margin-right: 6px;
}

.cbx:hover {
  background: rgba(0, 119, 255, 0.06);
}

.cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
  padding-left: 8px;
  line-height: 18px;
}

.cbx:hover span:first-child {
  border-color: #07f;
}

.inp-cbx {
  position: absolute;
  visibility: hidden;
}

.inp-cbx:checked+.cbx span:first-child {
  background: #07f;
  border-color: #07f;
  animation: wave 0.4s ease;
}

.inp-cbx:checked+.cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@-moz-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-o-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
代码语言：javascript
复制
<input class="inp-cbx" id="morning" type="checkbox" />
<label class="cbx" for="morning">
  <span>
    <svg width="12px" height="10px">
      <use xlink:href="#check"></use>
    </svg>
  </span>
  <span>Label</span>
</label>

<!--SVG Sprite-->
<svg class="inline-svg">
  <symbol id="check" viewbox="0 0 12 10">
    <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
  </symbol>
</svg>

​

当我提取单独的svg并将其直接放入svg标记(但删除内联svg类)时，检查svg就不再出现了。如下所示：

​

代码语言：javascript
复制
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  color: #223254;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.cbx:not(:last-child) {
  margin-right: 6px;
}

.cbx:hover {
  background: rgba(0, 119, 255, 0.06);
}

.cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
  padding-left: 8px;
  line-height: 18px;
}

.cbx:hover span:first-child {
  border-color: #07f;
}

.inp-cbx {
  position: absolute;
  visibility: hidden;
}

.inp-cbx:checked+.cbx span:first-child {
  background: #07f;
  border-color: #07f;
  animation: wave 0.4s ease;
}

.inp-cbx:checked+.cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@-moz-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-o-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
代码语言：javascript
复制
<input class="inp-cbx" id="morning" type="checkbox" />
<label class="cbx" for="morning">
  <span>
    <svg width="12px" height="10px">
      <symbol id="check" viewbox="0 0 12 10">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
      </symbol>
    </svg>
  </span>
  <span>Label</span>
</label>

​

造成这种行为的原因是什么，我如何使其表现为同样的行为？

我尝试过使用内联svg类和选中标记来查找缺少哪些css属性，但是我看不到有什么不同之处，这让我相信这是svg标记中的一些特殊行为。

html
css
svg
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-03 12:36:39

在@enxaneta的帮助下，我了解到除非与<symbol>一起使用，否则<use>是不可见的，所以我简单地删除了<symbol>，用<svg>替换了它，它工作得很好：

​

代码语言：javascript
复制
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  color: #223254;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.cbx:not(:last-child) {
  margin-right: 6px;
}

.cbx:hover {
  background: rgba(0, 119, 255, 0.06);
}

.cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}

.cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.cbx span:last-child {
  padding-left: 8px;
  line-height: 18px;
}

.cbx:hover span:first-child {
  border-color: #07f;
}

.inp-cbx {
  position: absolute;
  visibility: hidden;
}

.inp-cbx:checked+.cbx span:first-child {
  background: #07f;
  border-color: #07f;
  animation: wave 0.4s ease;
}

.inp-cbx:checked+.cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@-moz-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@-o-keyframes wave {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave {
  50% {
    transform: scale(0.9);
  }
}
代码语言：javascript
复制
<input class="inp-cbx" id="morning" type="checkbox" />
<label class="cbx" for="morning">
  <span>
    <svg width="12px" height="10px" viewbox="0 0 12 10">
        <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
    </svg>
  </span>
  <span>Label</span>
</label>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72099297

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档