使用CSS旋转和裁剪svg背景

文章/答案/技术大牛

发布

1回答

css、svg

我有一个奇怪的形状svg，我不能编辑，有没有办法旋转和裁剪它的一部分，并使用它作为CSS的背景图像？只要它在移动设备上的位置保持不变，它就不一定是背景图像。<form class="" action="index.html" method="post"> </div> </div&

浏览 14提问于2020-12-16得票数 0

回答已采纳

3回答

根据父级尺寸旋转然后调整大小

css

如果只使用CSS (没有js)，是否可以旋转带有背景图像的div，然后设置宽度和高度以适应屏幕？如果没有CSS SVG裁剪，它能完成吗？我没有什么特别的理由不想要SVG。只是问一下是否可能。

浏览 3提问于2016-05-30得票数 1

回答已采纳

1回答

如何旋转矩形而不将其裁剪

rotation、crop、snap.svg

我创建了一个1.5英寸x 1.5英寸的矩形，并在外部添加了一个边框，当我将其旋转45度时，边角将被裁剪，如下所示。如何在不被裁剪的情况下旋转像这样的东西？我测试了使用Snap和css旋转这个SVG形状。我在两者之间得到了非常不同的结果。使用我正在构建的应用程序，形状可以从0-359度旋转。这是他们的形状看起来像2。形状看起来很好，旋转捕捉，但当放在一个div<e

浏览 1提问于2014-04-16得票数 1

1回答

即相对于裁剪的背景定位的图像也会被裁剪

html、css、svg

我正在尝试将SVG图像放置在另一个背景上的视差裁剪的背景上。我希望SVG一半在背景上，一半在前景上，但它是使用剪辑路径与背景一起裁剪的。有没有其他方法可以在不裁剪SVG的情况下使用效果，或者有什么方法可以禁用继承的效果？请记住，我想保持它相对于这个背景的位置。有问题的CSS .content height: 300vh; min-he

浏览 42提问于2019-02-21得票数 3

回答已采纳

4回答

使用CSS和SVG的钻石菜单项

css、svg、responsive-design、css-shapes

我想用HTML&CSS编写以下设计代码到目前为止我所做的是：我是用： .menu #m1 { tr

浏览 8提问于2014-10-24得票数 6

回答已采纳

1回答

IE过滤器语句中断IE9背景剪辑

css、internet-explorer-9

我相信所有的浏览器都默认使用background-clip: border-box;。这似乎是默认行为。这里有一个小提琴来说明：有没有其他人遇到过这个问题？

浏览 1提问于2012-10-16得票数 0

回答已采纳

1回答

SVG转换为样式表属性(与CSS转换相反)

css、svg、rotation、transform

背景：transform: rotate(45deg);但我知道 CSS 2D旋转转换使用元素的50%, 50%点作为旋转轴；而SVG 2D旋转转换使用在第2和第3参数中提供的x, y协调作为旋转轴。

浏览 9提问于2020-01-28得票数 1

回答已采纳

1回答

如何裁剪svg？

javascript、reactjs、svg.js

我有一个超大的svg背景，一些元素被呈现在背景之上。然后，我想对svg进行裁剪，使其适合前景中的元素，并裁剪背景。这个是可能的吗？我正在使用svg.js，但在函数中找不到相应的构建。有可能种植SVG吗？

浏览 9提问于2022-11-22得票数 -3

1回答

将多边形的偏移/位置设置为旋转

html5-canvas、kineticjs

我正在尝试执行不同形状的背景图像的裁剪。首先，我在旋转多边形时遇到了问题:我想让它们围绕它的中心旋转。第二，用多边形形状裁剪背景。有什么想法吗

浏览 2提问于2013-05-13得票数 1

2回答

旋转body元素的背景

css、css-transforms

如何使用CSS变换旋转body元素的背景？旋转body元素的内容很好，旋转非body元素的背景也是如此：<style> background: url(https://upload.wikimedia.org/wikipedia/commons/3/35/Smile-sad.svg); transform: rotate(-45de

浏览 0提问于2018-01-15得票数 1

2回答

HTML <div>上的自定义裁剪路径

javascript、jquery、css、svg、mask

在对SVG进行了不成功的实验之后，我希望使用另一种技术将剪辑路径(自定义多边形，如箭头)应用于<div>，女巫在<div>中有一些其他的HTML元素。firstbox"> <a href="#">This is a link</a></div> 问题是关于<div>之外的背景<

浏览 2提问于2012-06-20得票数 0

1回答

波形/曲线模块

html、css、svg

每个模块都有一个波形/曲线边框：有没有可能用css做这样的事情？每个模块都会重叠：我想出的一个解决方案是在div之前和之后给模块一个波浪/曲线的背景图像，并给它们一个负边距，但很快就意识到这不适用于图像模块： .module.style-2 {

浏览 0提问于2016-06-23得票数 2

1回答

视差，面具，过渡(哦，天啊！)不需要剪裁的IE

css、internet-explorer、svg、parallax、image-masking

在Chrome中，我没有问题，因为我可以使用：对于Firefox，我没有问题，因为我可以使用： <svg><defs><clipPath id="clip-elem"><polygon points="0 0, 891 300, 0 944"></polygon></clipPath></

浏览 2提问于2016-12-28得票数 0

2回答

防止图像旋转以更改视口宽度

html、css

我将旋转应用到一个img元素，这会导致视口改变它的宽度，让用户有可能滚动到一边，有办法改变这个吗？图像是svgs 

浏览 4提问于2017-02-07得票数 0

回答已采纳

2回答

我在SVG元素中有一个带有clipPath的图像。我尝试将css添加到图像以保持宽高比，但它似乎遵循SVG的preserveAspectRatio="none"，但我只想将其应用于我的clipPath部分。<div id="containerId"> <svg class="svg-graphic" preserveAspectRatio="none" viewBox="0 0 1920 108

浏览 13提问于2019-09-11得票数 0

1回答

背景色忽略透明内容？

html、css、image、transparent

我有填充内容和透明内容的图像。我想得到背景颜色，但只对填充内容(忽略透明)，这是可能的吗？我能做些类似的事吗？hairbutton").click(function() { $(".img-wrap#hair img").cssfacebutton").click(function() { var facecolor = $('#facecolorinput').

浏览 2提问于2014-12-30得票数 3

回答已采纳

1回答

拖放、裁剪和调整图像大小

javascript、jquery、html、css、drag-and-drop

在放置时，它应该根据div形状进行裁剪(在裁剪时没有用户交互)。divs也应该是可旋转或可移动的。我该怎么做呢？任何帮助都将不胜感激。谢谢。

浏览 1提问于2012-03-29得票数 0

1回答

尾翼:动画-旋转没有出现

reactjs、tailwind-css、vite、tailwind-ui、daisyui

我想包括一个从顺风-css加载旋转器，并根据尾风文件，这应该是可用的className=“动画自旋”。 >

浏览 13提问于2022-11-01得票数 0

回答已采纳

2回答

为d3.js轴分配背景颜色和更改层顺序

javascript、jquery、svg、d3.js

目前，当你移动周围的圆圈，他们会移动的斧子和模糊他们。我试图为斧头分配一个背景颜色，这样圆圈就会在斧头下面移动。然而，使用CSS background属性似乎什么都不做。

浏览 1提问于2013-12-30得票数 2

回答已采纳

1回答

如何缩放.svg作为div中的背景？

html、css、svg

我使用了一个div容器在其中插入一个徽标如下：css如下所示： width: 333px;} 但是，当我尝试重新设置#徽标(例如，对于屏幕较小的设备)时，它不会调整图像的大小，即背景和图像在边缘被裁剪。我的问题是:当div-容器正在缩放时，如何缩放..s

浏览 2提问于2016-05-10得票数 2

回答已采纳

点击加载更多