CSS变换- SVG上的原点始终为(0,0)
CSS变换指的是通过CSS样式来改变元素的位置、大小和形状等属性。其中，SVG（Scalable Vector Graphics）是一种使用XML描述二维矢量图形的图像格式。
在SVG中，原点始终位于(0,0)，即坐标系的左上角。在CSS中，可以通过transform属性对SVG元素进行变换操作，包括平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）等。
SVG上的原点始终为(0,0)的优势在于，可以方便地控制SVG图形在页面中的位置和大小。通过对SVG元素应用平移变换，可以将其移动到指定位置；通过缩放变换，可以调整SVG图形的尺寸；通过旋转和倾斜变换，可以改变SVG图形的方向和形状。
应用场景方面，SVG常用于制作矢量图形、图标、动画等。由于SVG是基于矢量的，所以在放大或缩小时不会失真，可以保持图形的清晰度。同时，SVG也支持文本、颜色、渐变、滤镜等特性，使得它在Web开发中具有广泛的应用前景。
腾讯云提供了一系列与云计算相关的产品和服务，其中与CSS变换和SVG相关的产品包括：
- 腾讯云服务器（CVM）：提供了基于云的计算资源，可用于部署Web应用程序和处理SVG图形。 产品介绍链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：用于存储和托管SVG图形文件，支持高可用、低延迟的数据访问。 产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云内容分发网络（CDN）：加速SVG图形的传输和访问，提供更快的加载速度和更好的用户体验。 产品介绍链接：https://cloud.tencent.com/product/cdn
- 腾讯云云函数（SCF）：支持无服务器的计算模型，可用于处理SVG图形的动态生成和渲染。 产品介绍链接：https://cloud.tencent.com/product/scf
通过以上腾讯云产品，开发者可以快速搭建和部署基于SVG的Web应用程序，并实现SVG图形的变换和动态效果。
相关·内容
1回答
我想让每个多边形/组以动画的形式出现。我希望它是Y轴上的旋转，旋转的原点是最左边顶点的Y轴(想象一张扑克牌在左边靠在桌子上，从垂直到扁平)。但是，根据this Fiddle，变换的原点始终是Y轴，但始终使用x=0作为旋转的原点，即使我使用最左边的顶点作为变换原点。奖励:在初始旋转后，
浏览 60提问于2019-02-25得票数 0
回答已采纳
2回答
转换svg插图中的css属性
、、、、
我第一次尝试用css对用svg制作的插图进行动画处理，但我有一个不知道如何解决的问题。有人知道我做错了什么吗？ <style> <
浏览 0提问于2021-06-13得票数 0
我有一个圆和一个SVG平面： <g class="point" transform="translate(6.5,1)"> <text class="point-index" y="4"><tspan text-anchor="middle">0&
浏览 0提问于2016-02-02得票数 0
在RaphaelJS中，您可以创建元素的“集合”。变换此集合时，它会使用公共原点变换集合中的所有元素(而不是每个元素都有自己的原点)。这是一个简单的例子：path = paper.path(string);path = paper.path(string);set.transform("T0
浏览 2提问于2015-02-15得票数 0
1回答
我有一个元素，我可以使用CSS3转换来缩放和移动它。我的目标是始终在鼠标位置进行缩放，因此我将元素的转换原点设置为元素的相对鼠标位置。从比例1放大和缩小效果很好，但当我将光标移动到缩放的元素上时，设置转换原点也会移动元素。有人能帮我吗？
浏览 1提问于2013-05-16得票数 1
2回答
我使用的是XNA，但对于本例来说这并不重要。假设我有一个精灵。然后，我在做任何事情之前应用一个缩放矩阵。缩放矩阵是应用于缩放精灵的局部轴，还是只是将点向下移动？换句话说，将世界空间中0.5f的缩放矩阵应用于位于世界原点的精灵，是将精灵的局部轴缩小一半，还是将构成精灵的所有点缩小一半？
同样的情况也适用于平移和缩放。在我的脑海中，我想象了一个30,30的平移矩阵，将精灵的局部原点移动
浏览 0提问于2010-09-09得票数 2
回答已采纳
我试着用svg动画来得到蜻蜓的翅膀。<g id="wing_left"> <path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47
浏览 1提问于2014-10-29得票数 0
回答已采纳
2回答
我一直在纠结这个SVG问题，我确定这是我遗漏的一个属性或什么东西，但我搞不清楚到目前为止，我可以让圆从左到右移动，我也可以缩放它，但是当我尝试组合这两个动画时，它会到处移动。<svg width="800px" height="10
浏览 17提问于2018-08-31得票数 1
回答已采纳
SVG中的动画：svg {}
50% {DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1
浏览 6提问于2015-06-13得票数 0
回答已采纳
class='container'></div> Rotate示例CSS如下所示 transform: rotate(30deg);}
如果我将变换原点设置
浏览 4提问于2019-03-22得票数 0
1回答
在上关注transform: translate(100%, 0) scale(-1, 1); 1-更改窗口大小(可能增大窗口大小)，您可以看到线原点不会停留在0 0上通过执行我所
浏览 0提问于2019-10-27得票数 0
1回答
我在尝试缩放子元素时遇到了关于转换原点的问题。 在尝试缩放较大svg中的长方体动画时，它使用来自整个svg的变换原点(0,0)，而不是我试图缩放的元素的中心。这使得它看起来像是“从左上角飞进来”，这不是我想要的。我正在寻找使它从元素中心的规模。 如何在不硬编码子元素本身的(x，y)位置的情况下，相对于我正在制作动画的</
浏览 21提问于2019-05-22得票数 2
回答已采纳
1回答
我已经做了一些阅读，但还没有找到或找到一个解决我的问题的工作方案。我有一组内嵌SVG的路径，我需要通过它的中心旋转。但问题是，FireFox没有解释SVG元素的转换原点属性。有没有人有办法解决这个问题，或者有人能给我指明正确的方向？
我尝试过将组包装到另一个组中，并使用translate属性重新定位所有内容，但这并没有解决问题。我也尝试使用像素而不是百分比，也没有运气。
浏览 5提问于2015-01-13得票数 2
1回答
我想指定一个SVG线性渐变，以精确地复制CSS线性渐变行为。例如，在CSS渐变中，您可以指定渐变的起点和终点分别位于框的左上角和右下角。当框调整大小时，背景渐变会自动适应新的大小。在我的第一次尝试中，我用SVG复制了一个CSS线性渐变，通过指定一个角度，并根据框的大小计算x1，y1，x2，y2坐标。但如果调整了框的大小，则渐变的角度不会改变，也不再正确。我的下一个
浏览 1提问于2012-02-25得票数 6
回答已采纳
2回答
使用转换原点缩放SVG元素
、、、、
html lang="en-US"> <link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css> <script src="origin.js"></script></htm
浏览 3提问于2017-08-17得票数 5
回答已采纳
1回答
我目前正在处理一个用例，我将地图设置为画布的背景，并在其上绘制缩放选项也集成到它。我使用缩放来放大，在缩放之后，图像的顶部被裁剪，最终在缩小后可见。我正在加载画布到一个DIV的滚动和期望是避免图像被裁剪后，缩放和滚动应动态增加在缩放。 下面是我用普通HTML和JS编写的示例代码片段。如果任何人有相同的解决方案或解决方法，请帮助。提前感谢 注意:即使在Angular中有任何可用的插件，请评论，因为我正在使用Angular实时，并且我已经创建了一个简单<e
浏览 91提问于2021-01-05得票数 0
2回答
图片库工作不正常
、、
我有一个无序的列表中的12个图像在3个冒号x 4行库。悬停时，将应用变换比例。如何将(3n+1)图像(图像1-4-7-10 )的变换原点设置为左侧，将第3n个(3 -6-9-12)元素的变换原点设置为右侧？
我试着在这里输入html和css，但得到了错误信息。
浏览 1提问于2014-02-06得票数 0
4回答
如果有一个带有默认轴心点(0，0)的svg旋转( deg)，那么我可以计算旋转变换矩阵为| cos a -sin a 0 || 0 0 1 |但是如果轴心点不是(0,0)，假设(px，py)，那么我如何计算旋转变换矩阵
浏览 2提问于2013-02-02得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
