Я пытаюсь изменить размер 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:
Любая помощь, которую вы могли бы оказать, будет большим подспорьем! Спасибо за уделенное время!