css - 如何调整 SVG 的大小
问题描述
我正在尝试调整使用clip-path
. 尽管我努力并阅读了文档,但这还没有奏效。
问题:有两个图标。它们在::after
元素内悬停时交换。目前,箭头 SVG 在 14px 处显示良好,但链接 SVG 仅部分显示。我尝试通过添加来设置高度和宽度displayBox
,但没有运气。
这是CSS:
@mixin externalLink($color, $focusColor) {
position: relative;
color: $color;
text-transform: uppercase;
&::after {
content: "";
margin: $size-smaller;
display: inline-block;
background: $color;
width: 14px;
height: 14px;
clip-path: url(#arrow-right);
transition: color .25s;
vertical-align: middle;
}
&:hover,
&:focus {
color: $focusColor;
text-decoration: none;
&::after {
transform: scale(0.77, 0.77);
background-color: $focusColor;
clip-path: url(#link);
}
}
}
a {
display: inline-block;
margin-bottom: 10px;
@include externalLink($yellow, $white);
}
以下是 SVG:
<svg width="0" height="0" viewBox="0 0 14 14" class="svg-def">
<defs>
<clipPath id="arrow-right">
<path d="M9.427.135a.527.527 0 0 0-.705 0 .428.428 0 0 0 0 .639l3.577 3.27H.494C.219 4.046 0 4.246 0 4.498c0 .251.219.458.494.458h11.805L8.722 8.22a.435.435 0 0 0 0 .645c.197.18.515.18.705 0l4.425-4.046a.418.418 0 0 0 0-.638L9.427.135z" fill-rule="nonzero"/>
</clipPath>
</defs>
</svg>
<svg width="0" height="0" viewBox="0 0 14 14" class="svg-def">
<defs>
<clipPath id="link">
<path d="M16.506 8.003l-2.633 2.44a5.617 5.617 0 0 0-.383-2.676l1.376-1.3a2.44 2.44 0 0 0 .793-1.782c0-.65-.264-1.291-.793-1.78a2.816 2.816 0 0 0-1.922-.735c-.692 0-1.385.244-1.922.734L8.107 5.58c-.529.507-.802 1.157-.802 1.807 0 .65.264 1.291.802 1.781.236.22.355.498.355.768s-.119.54-.355.752c-.22.21-.52.312-.82.312-.292 0-.593-.101-.82-.312C5.492 9.768 5 8.568 5 7.37c0-1.199.492-2.398 1.467-3.31l2.897-2.676A5.234 5.234 0 0 1 12.926 0c1.293 0 2.587.464 3.58 1.384.993.92 1.494 2.12 1.494 3.318 0 1.19-.501 2.38-1.494 3.301zm-4.972 5.934l-2.913 2.697C7.638 17.544 6.345 18 5.043 18c-1.292 0-2.585-.455-3.568-1.366C.492 15.724 0 14.527 0 13.33c0-1.205.492-2.402 1.475-3.312l2.658-2.453a5.7 5.7 0 0 0 .382 2.697l-1.374 1.273a2.423 2.423 0 0 0-.792 1.778c0 .65.264 1.29.792 1.779.528.489 1.22.733 1.92.733.693 0 1.393-.244 1.921-.733l2.886-2.672c.547-.489.81-1.138.81-1.779 0-.649-.263-1.29-.81-1.778a1.042 1.042 0 0 1-.336-.776c0-.278.109-.556.336-.767.228-.21.528-.32.838-.32.3 0 .6.11.828.32.984.92 1.466 2.116 1.466 3.313a4.478 4.478 0 0 1-1.466 3.304z" fill-rule="evenodd"/>
</clipPath>
</defs>
</svg>
这是 Chrome 中的结果:
您能提供的任何帮助都将是很大的帮助!感谢您的时间!
解决方案
推荐阅读
- python - 将 float32 数据类型的 numpy 数组转换为十六进制格式
- dart - 如何确保在构建 Widget 之前加载异步函数?
- postgresql - “INSERT ON CONFLICT DO NOTHING RETURNING”类型的查询不返回任何内容
- angular7 - 资产文件夹解析:在项目中运行应用程序而不拾取资产
- excel - 如何检查数据透视表中的数据是否用于 GETPIVOTDATA 公式
- layout - Flutter:如何设置 SliverAppBar 的高度?
- javascript - 如何找到具有等于输入的构造函数参数的特定类的新对象
- excel - 查找标题从一列到下一列不同的列
- android - 应用程序在前台工作时可以发送通知
- .net - 如何关闭其他应用程序的套接字连接?