Question

我正在为我的徽标编写动画（here是codepen的链接），你也可以在那里看到代码，但我也会在这里发布。

所以我针对每个路径元素并更改了它的属性，一切正常，除了因为我使用＆＃34;转换＆＃34;移动元素，因为它们离开容器并被隐藏。

这是SVG元素的CSS

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })
    .state('app.login', {
      url: '/login',
      views: {
        'menuContent': {
          templateUrl: 'templates/login.html',
          controller: 'signinController'
        }
      }
    }) 
    .state('app.registration', {
      url: '/registration',
      views: {
        'menuContent': {
          templateUrl: 'templates/registration.html',
          controller: 'signupController'
        }
      }
    })

我尝试在svg标记中添加svg { width:400px; height:400px; margin-top:100px; margin-left:calc(50% - 200px); transform-style:preserve-3d; overflow:visible; }内联属性，但这也不起作用，我该怎么办？我希望无论在哪里，每条路都可见，这可能吗？

提前谢谢。

Answer 1

您添加到overflow: visible的CSS定义中的svg规则应该有效。

它之所以没有，是因为你的SVG还有一个<clipPath>，它具有隐藏溢出的效果。当你摆脱它时，事情就像你想要的那样。

Demo codepen

要删除剪辑，我删除了<clipPath></clipPath>元素以及clip-path="url(#clipPath20)"中的<g>引用。这两个都接近文件的开头。

如何允许svg元素中的路径元素溢出容器

1 个答案: