如何将转换原点与SVG结合使用? [英] How to use transform-origin in conjunction with SVGs?

查看：48
本文介绍了如何将转换原点与SVG结合使用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从其中心旋转 SVG路径，但是它不起作用

  a {宽度:40px；高度:40px；宽度:40px；字体大小:1.5rem；填充:1px；溢出:隐藏；边框:1px纯黑色；}a:悬停路径{-webkit-transform:旋转(360deg);-moz-transform:旋转(360deg)；-ms-transform:旋转(360deg);-o-transform:旋转(360deg);变换:旋转(360度);}一条路径 {过渡:所有.5s都由内而外；transform-origin:中心中心；}  

 < link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css完整性=" sha384-ggOyR0iXCbMQv3Xipma34MD + dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin =" anonymous>< a href =#" class ="rounded-circle" data-toggle ="tooltip" data-placement ="left" title ="Twitter" aria-label ="Twitter">< svg xmlns ="http://www.w3.org/2000/svg"版本="1.1" preserveAspectRatio ="xMidYMid满足" viewBox =-250 -150 1000 1000" height ="40px" width ="40px>< path fill =#007bff" d ="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.29925.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.040-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.308-52.161 39.54.253z"/></svg></a>

解决方案

您已假定转换框为填充框，但默认情况下它不是视图框，而是视图框.您可以使用 transform-b​​ox 

  a {宽度:40px；高度:40px；宽度:40px；字体大小:1.5rem；填充:1px；溢出:隐藏；边框:1px纯黑色；}a:悬停路径{-webkit-transform:旋转(360deg);-moz-transform:旋转(360deg)；-ms-transform:旋转(360deg);-o-transform:旋转(360deg);变换:旋转(360度);}一条路径 {过渡:所有.5s都由内而外；transform-origin:中心中心；transform-b​​ox:填充框；}  

 < link rel ="stylesheet" href ="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css完整性=" sha384-ggOyR0iXCbMQv3Xipma34MD + dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin =" anonymous>< a href =#" class ="rounded-circle" data-toggle ="tooltip" data-placement ="left" title ="Twitter" aria-label ="Twitter">< svg xmlns ="http://www.w3.org/2000/svg"版本="1.1" preserveAspectRatio ="xMidYMid满足" viewBox =-250 -150 1000 1000" height ="40px" width ="40px>< path fill =#007bff" d ="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.29925.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.040-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.308-52.161 39.54.253z"/></svg></a>

I'm trying to rotate an SVG path from its center but it isn't working

a {
  width: 40px;
  height: 40px;
  width: 40px;
  font-size: 1.5rem;
  padding: 1px;
  overflow: hidden;
  border: 1px solid black;
}

a:hover path {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

a path {
  transition: all .5s ease-in-out;
  transform-origin: center center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">
        <path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
    </svg>
</a>

解决方案

You've assumed the transform box is the fill box, but it isn't by default, it's the view box. You can fix that with transform-box

a {
    width: 40px;
    height: 40px;
    width: 40px;
    font-size: 1.5rem;
    padding: 1px;
    overflow: hidden;
    border: 1px solid black;  
}

a:hover path {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}

a path {
    transition: all .5s ease-in-out;
    transform-origin: center center;
    transform-box: fill-box;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">
        <path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
    </svg>
</a>

这篇关于如何将转换原点与SVG结合使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆