SVG子元素上的CSS变换原点问题
是指在SVG中，子元素应用CSS变换时，其变换的原点位置的问题。
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，用于描述二维图形和图形应用程序。在SVG中，可以使用CSS来对图形进行样式化和变换。
CSS变换包括平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）。当应用这些变换时，子元素的原点位置会影响变换的结果。
在SVG中，每个元素都有一个默认的变换原点，即元素的中心点。当应用CSS变换时，默认情况下，变换会以元素的中心点为原点进行操作。
然而，有时候我们希望以其他位置作为变换的原点，这就需要使用CSS属性transform-origin来指定变换的原点位置。
transform-origin属性可以接受不同的值，包括像素值、百分比值和关键字。通过指定不同的值，可以将变换的原点设置在元素的不同位置。
例如，如果想要将变换的原点设置在元素的左上角，可以使用以下CSS样式：
transform-origin: top left;这样，当应用平移、缩放、旋转或倾斜变换时，变换的中心点就会位于元素的左上角。
对于SVG子元素上的CSS变换原点问题，可以根据具体的需求来设置transform-origin属性，以实现不同的变换效果。
在腾讯云的产品中，与SVG子元素上的CSS变换原点问题相关的产品和服务可能包括：
- 腾讯云对象存储（COS）：用于存储和管理SVG文件，提供高可靠性和可扩展性的存储服务。产品介绍链接：腾讯云对象存储（COS）
- 腾讯云云服务器（CVM）：用于部署和运行SVG应用程序，提供高性能、可靠性和安全性的云服务器。产品介绍链接：腾讯云云服务器（CVM）
- 腾讯云内容分发网络（CDN）：用于加速SVG文件的传输和分发，提供全球覆盖的加速节点，提升用户访问体验。产品介绍链接：腾讯云内容分发网络（CDN）
请注意，以上仅为示例，具体的产品选择应根据实际需求和情况进行评估和决策。
相关·内容
我使用的API可以根据我的地图自动生成图例，但是图例的格式不正确。我发现创建的SVG返回一个转换：
变换: matrix(1.00000000,0.00000000,0.00000000,1.00000000,62.50000000,62.50000000)
但是我想要的是它返回一个
变换: matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)
我设法让它在Firefox中工作，使用它作为我的CSS
.esriLegendLayer svg :nth-child(2){
display: inli
浏览 0提问于2015-07-14得票数 2
下面的函数在一些圆弧的中间绘制小圆。我想画出从这些圆到其他元素的线。
这就是为什么我需要得到圆的cx/cy值(在它们被旋转之后)。
var drawSmallCircles = function(arcs){
var d=arcs;
var arcRadius=d[0].outer;
var svg = d3.select("svg").append("g")
.attr("transform", "translate(" + width / 4 + "," + height / 2 +
浏览 2提问于2014-08-09得票数 0
1回答
我想指定一个SVG线性渐变，以精确地复制CSS线性渐变行为。例如，在CSS渐变中，您可以指定渐变的起点和终点分别位于框的左上角和右下角。当框调整大小时，背景渐变会自动适应新的大小。
在我的第一次尝试中，我用SVG复制了一个CSS线性渐变，通过指定一个角度，并根据框的大小计算x1，y1，x2，y2坐标。但如果调整了框的大小，则渐变的角度不会改变，也不再正确。(我必须重新计算所有的坐标)。
我的下一个尝试是使用变换来旋转渐变。下面是一些代码：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height
浏览 1提问于2012-02-25得票数 6
回答已采纳
1回答
我已经导入了一个用inkscape创建的SVG文件。
我使用。
某些元素没有出现在正确的位置。似乎我在svg中复制/粘贴的所有元素(有一个转换矩阵就是问题所在)
当我尝试使用.attr('tranform'，'s0.5')缩放集合时，它变得更加令人沮丧。
->所有子元素都是缩放的，但位置更差。
浏览 0提问于2012-10-30得票数 0
回答已采纳
我有一个有3个路径的SVG，但只需要它们连续旋转。这在只有一条路径的SVG上工作得很好，但不适用于这条路径，我还得到了一些我想要在固定位置上旋转的其他路径。Here is the source code with preview! .rotate {
animation: rotation 8s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
浏览 14提问于2021-02-10得票数 0
SVG animateTransform不像css3转换那样工作。
svg.truck {
overflow: visible;
}
.smoke{
transform-origin: 50% 50%;
animation: smoke 1.5s infinite ease-out;
}
@keyframes smoke {
from {transform: translate(0, 5px) scale(1, 1);}
to { transform: translate(40px, 10px) scale(4, 4);}
}
<svg class='tr
浏览 1提问于2015-12-15得票数 1
回答已采纳
我正在尝试用jQuery自动化css设置，我有如下功能
$(".footer").css(foot_css)//pre-defined css object
//AND
$(".footer").hover(function(){
$(this).css("-webkit-transform", "scale(2)");
});
页脚被设置为bottom=0 (使用foot_css)，但当我缩放页脚时，它不会停留在bottom=0，一些文本位于屏幕下方，因此无法阅读。编辑:这种情况也发生在左侧，".footer“类的左下
浏览 1提问于2012-09-25得票数 3
1回答
我已经做了一些阅读，但还没有找到或找到一个解决我的问题的工作方案。我有一组内嵌SVG的路径，我需要通过它的中心旋转。但问题是，FireFox没有解释SVG元素的转换原点属性。有没有人有办法解决这个问题，或者有人能给我指明正确的方向？
我尝试过将组包装到另一个组中，并使用translate属性重新定位所有内容，但这并没有解决问题。我也尝试使用像素而不是百分比，也没有运气。有什么帮助吗？
项目：
目标元素
#seconds-topper-tool
浏览 5提问于2015-01-13得票数 2
我试图动画这些齿轮，它的工作与预期的Chrome。然而，在Firefox中，旋转的起源是不同的，并且无法解决如何解决这个问题。
我试过使用宽度、高度、视图框和x&y属性，但是似乎没有什么是完美的。
基于。
最后，在不支持我的图形/动画的其他/旧浏览器中为我的SVG路径提供适当的备份，最佳实践是什么？
剩下的代码在这里： (HTML + SVG代码太长，无法粘贴)
CSS:
#gear-head {
position: fixed;
background: #172235;
width: auto;
height: 100%;
}
#gear-head .gear {
浏览 1提问于2015-04-14得票数 0
1回答
我正在使用skrollr对一些svg元素的缩放进行动画处理。问题是我想动画他们从左下角的位置扩展，但他们是从左上角(默认艺术板锚点)动画。
...
<g data-0="transform:scale(0)"
data-600="transform:scale(1)">
...
你可以在上面看到它。有没有一个我可以添加到svg的标记，可以改变它的锚点，我可以在skrollr中做的事情，或者从illustrator中导出它的方法可以做到这一点？
谢谢
浏览 4提问于2013-07-17得票数 1
回答已采纳
1回答
我有一个SVG：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42px"
height="51px" viewBox="0 0 426 513" xml:space="preserve" id="aniBin">
<g id="Bin">
<g
浏览 0提问于2014-12-07得票数 0
我面临这样的情况，我有一个容器svg元素和一组内部子元素：
<g transform="translate(-157.82326597222223, 381.00000000000006), rotate(180)">
<path d="M 0 10 L 600 10 L 680 63.5 L 600 117 L 0 117 Z"></path>
<g transform="translate(180, 35.099999999999994)">
<foreig
浏览 1提问于2013-05-20得票数 4
回答已采纳
1回答
在iPad3上设置webkit透视图CSS属性使子元素呈现非常模糊，就像用于非视网膜显示的图像一样。需要说明的是，我不是在谈论图像渲染模糊，DOM子元素是渲染模糊。
对此我们能做些什么？
简单地删除属性不是一个选项，因为我使用的动画需要在Z轴上移动。
属性在CSS中是这样设置的：
-webkit-perpective: 500;
谢谢你在这方面的帮助！
浏览 2提问于2012-06-01得票数 5
回答已采纳
1回答
我希望在<def>部分中定义成组的形状，并通过<use>标记显示它们，其中transformation-origin是组的中心。以下是说明我的问题的一个最起码的例子：
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="triangle">
<path fill="
浏览 0提问于2022-08-11得票数 0
回答已采纳
1回答
所以我有一个svg，里面有多个多边形，我想要完成的是动画里面的一个多边形(用放松来调整大小)，这样它就不会从它的位置移动。考虑到多边形位置是由points="..."设置的(我猜..)。
我想要这样做，最好是在jQuery或CSS中，但普通的JavaScript也能工作，也可以使用任何其他库。
下面是一个示例：
shapes.svg：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-I
浏览 2提问于2016-06-02得票数 0
回答已采纳
2回答
我希望在circle svg元素上创建一个简单的脉冲动画。我使用的是transform: scale(..,..)动画，但出于某种原因，它正在其容器中移动整个圆圈，而不是简单地缩放元素本身。
下面是动画：
animation: pulsate 2s infinite linear;
@keyframes pulsate {
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}
下面是一个示
浏览 3提问于2015-12-17得票数 5
回答已采纳
3回答
我想知道css翻译功能的参考位置是什么。
例如，如果我有一个：
p {
transform:translate(100px,100px);
}
<div id="container">
<p> Try! </p>
</div>
在工具中，您可以看到一个绿色和蓝色的“框”，绿色是参考位置，蓝色是对象的真实位置。
但是引用既不是在窗口的左上角，也不是对象的父对象。我肯定我没有任何财产像垫子和保证金。
浏览 1提问于2016-08-05得票数 1
回答已采纳
嗨，我在一个dom树中动画子节点，我想知道它对父节点支点的影响。
假设父节点具有支点px和py。那么对px和py的影响是什么？
子节点转换为tx和ty距离，子节点按x-y方向缩放，其枢轴点cx和cy；子节点，通过改变cx到cx‘和cy’，然后以α角旋转。。
浏览 3提问于2011-12-28得票数 0
我知道有很多关于这个问题的争论，但我想知道是否有一种方法可以在不使用viewBox的情况下围绕元素的中心进行缩放(据我所知，它必须应用于svg，而不是单个对象)。在本练习中，我正在努力理解svg缩放的逻辑，我希望出现(不可见的)红色圆圈，然后在单击黄色矩形时缩放(就像它弹出一样)。有人能帮我吗？提前感谢
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/
浏览 1提问于2017-04-01得票数 0
2回答
转换svg插图中的css属性
、、、、
我第一次尝试用css对用svg制作的插图进行动画处理，但我有一个不知道如何解决的问题。
当我尝试将css转换属性应用于路径时，特别是对下臂(Shape-33)，该路径消失了。我不太理解的是，如果我将这个转换属性应用于父svg标记，它确实适用，而且肯定会遗漏一些东西。
有人知道我做错了什么吗？
谢谢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compati
浏览 0提问于2021-06-13得票数 0
我有一个圆和一个SVG平面：
<svg width="400" height="400">
<g class="point" transform="translate(6.5,1)">
<g class="delete-point" transform="translate(11,-11)"></g>
<circle></circle>
<text class="point-ind
浏览 0提问于2016-02-02得票数 0
所以我一直在编写这段代码，我已经让它工作起来了。我的问题是，它在第一次输入时工作得很好，但如果用户不断输入，新图片就会与旧图片重叠。我已经成功地编写了在给定新输入时替换椭圆的能力，但我在对所有路径和标记元素执行相同的操作时遇到了问题。我的整个代码如下(分成单独的文件)，我需要添加什么才能用新图像替换旧图像？ main.js function eccentricityChanged(){
let svg = document.getElementById('diagram');
let temp = document.getElementById('myte
浏览 119提问于2019-12-22得票数 0
回答已采纳
2回答
我一直在纠结这个SVG问题，我确定这是我遗漏的一个属性或什么东西，但我搞不清楚
我基本上想构建一个自定义加载器，它从svg的左侧开始向右移动，在中间缩放，所以它从可能0.5的小比例开始，在中间增加到可能3的比例，然后在另一边缩小到0.5，然后重复这个过程，左右移动
到目前为止，我可以让圆从左到右移动，我也可以缩放它，但是当我尝试组合这两个动画时，它会到处移动。
<svg width="800px" height="100px">
<circle
cx="0"
cy="50"
浏览 17提问于2018-08-31得票数 1
回答已采纳
我试图通过运行，但我无法让它生成SVG。它返回div的正确大小，但当您检查元素时，它看起来就像是从屏幕上绘制的路径。
如果我在Illustrator中打开SVG并重新保存，我可以让它工作，但随后我丢失了分组，Raphael绘制了单独的路径，并将组数组保留为空。我真的需要保留大陆组，因为我必须在大陆级别与地图进行交互。
我也使用了不同的拉斐尔生成器，结果是一致的。有谁有什么想法吗？
干杯
浏览 2提问于2012-06-13得票数 2
回答已采纳
我想在svg中创建一个元素，以使我正在处理的动画变得越来越大和越来越小。
我添加了一个简化的svg来演示我遇到的问题。
正在发生的事情是盒子越来越大(好)，但它也从顶部向下移动(坏)，我希望它留在原地。
我希望正方形的中心保持不变，同时它在Y方向上变大。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Gr
浏览 19提问于2019-11-01得票数 0
2回答
在这个例子中，我想从它的底部旋转锤子，那么是否有一种方法可以准确地知道元素上某个特定点的正确坐标，还是应该随机地尝试不同的点？
svg {
width: 50%;
}
.hammer-icon {
transform-origin: 200px 50px;
transition: transform .3s ease-out;
}
.hammer:hover .hammer-icon {
transform: rotate(45deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="
浏览 4提问于2017-11-20得票数 7
回答已采纳
我想用clipPath作为我想在网页上显示的图像，我希望能够用百分比代替polygon的绝对点数。我尝试将viewBox属性添加到svg元素中(这里建议使用)，但是当图像呈现时，看起来仍然使用绝对点。我的html设置如下：
<img class="clip-svg" src="{% static 'myApp/images/random.png' %}">
<div id="svg-container" style="width:100%; height:100%;">
<svg
浏览 30提问于2022-07-05得票数 2
回答已采纳
我无法获得可重用项或组中的所有子项目来符合指定的transform-origin。目标是能够反复使用相同的样式模板重复使用相同的形状。然而，考虑到transform-origin的样式，CSS或其他，并不是层叠的。它只适用于<use>时。
例如：
svg {
width: 125px; height: 125px;
background: rgba(0, 0, 0, 0.5);
}
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000
浏览 0提问于2018-05-19得票数 4
回答已采纳
1回答
希望有人能帮我解决对齐问题--我不知道这是CSS还是SVG的问题。
我试图使用提供的"Custom“字段替换(基于HTML的) 播放器中的默认"Play”按钮。首先，我在display:none类上使用ee-components-play-button-svg禁用本机按钮，然后使用:after元素添加所需的按钮。
问题是，我不知道为什么在IE11中按钮出现在更低的位置和中间的右边。我试过其他地方建议的修复方法，但没有结果：
向SVG中添加宽度和高度
添加preserveAspectRatio属性
我发现很难调试，因为IE的代码检查器不允许我专门选择和查看伪元素的
浏览 0提问于2018-09-28得票数 0
我想以编程的方式在适当的地方镜像任意的SVG元素。这意味着它们应该保持在当前位置，但会得到镜像。
我知道我可以通过使用scale(1, -1)来镜像元素，然后翻译它们。但问题是:我如何知道要翻译的数量？
我想我可以通过将元素的高度和元素到0轴的距离的两倍相加来计算数量。
例如，这适用于以下内容：
<polyline id="line1" stroke="green" stroke-width="1" fill="none"
points="
10, 10
浏览 0提问于2014-09-09得票数 0
我有几个继承自面板类的自定义控件的画布，它们在运行时使用rendertransform=(.5，.5)动态添加到画布中。但是，当应用平移变换( 50，50)并将其旋转100度时，它不会在其位置上旋转，而是以50的半径旋转，为什么？我做错什么了吗？
浏览 5提问于2011-05-22得票数 1
回答已采纳
我正在尝试修改dimple.js的，每个项目符号图表都在父svg的子svg中。对每个项目符号图表使用单独的svg的目的是使它们的管理(显示/隐藏/删除)更容易。此外，这使得图表的递归定义变得完整-也就是说，图表包含在svg中。
。
如你所见，从第二张图开始，鼠标悬停时，工具提示就不在地方了！请注意，对于child-svg，我已经设置了样式overflow: visible，如果没有该样式，工具提示将完全不可见。
我想知道在处理子svg元素的属性时是否遗漏了什么，或者这是dimple.js中的一个bug。此外，如果您知道任何解决方法，请让我知道。
谢谢。
浏览 10提问于2016-07-30得票数 1
2回答
我在SO上的一个答案中找到了下面的CSS，我想知道为什么它会创造出想要的心形：
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border
浏览 0提问于2013-06-30得票数 20
回答已采纳
1回答
我希望您能在以下问题上提供帮助:我希望使用CSS3转换，以便将浏览器的视图端口围绕鼠标单击的位置进行居中。请看一下我在上评论的例子。
我遇到的问题是，只有在第一次点击时，翻译才能正常工作。在第一次单击之后，视图端口中心与鼠标单击位置之间的距离似乎被正确计算，但是翻译似乎跳到了任何地方。
我已经尝试显式地将‘transform-原产地’(在我的示例中是-webkit-转换-原产地)设置为最后一次单击的位置(即视图端口的当前中心)，但是似乎使用“transform- simply”指令就被忽略了。
谢谢你帮忙！
浏览 2提问于2012-10-05得票数 2
我有一些div元素，我尝试在透视中移动和旋转它们。
小提琴：
代码在FF 24.0中运行良好，但在Chrome 30.0.1599.101中有一些问题。有趣的是，我在红色div的过渡中实现了我想要的东西，但黑色div的过渡却很奇怪。它开始旋转，但它不在正确的方向上，也不平滑，而是在过渡结束时旋转。
代码：
HTML：<div class="left"></div><div class="center"></div> <div id="right"></div>
JS：
浏览 1提问于2013-10-19得票数 0
我已经看到，在SVG中转换图形不会影响要转换的对象，而是转换整个坐标系，然后在该系统中绘制元素。
这有助于实现什么，而不是计算当前元素的新坐标？
我认为在canvas和CSS中，同样的行为也会给javascript和CSS加标签。
浏览 4提问于2018-10-06得票数 0
2回答
我有一个动画，可以在Firefox，Chrome上正常工作，但不能在Safari和Edge上工作。动画对象包含在使用js加载的svg文件中。其思想是元素连续出现在屏幕的中心，然后向上移动到它们预期的最终位置。
我用来实现这一点的css示例如下：
@-webkit-keyframes move-you {
0% {
opacity: 0;
-webkit-transform: translate(450px,400px);
transform: translate(450px,400px);
}
50%
浏览 3提问于2016-06-08得票数 1
1回答
当我尝试旋转QGraphicsSvgItem对象并设置位置时，我遇到了一个奇怪的问题/功能。
检查以下示例:为了简单起见，我有一个.svg，它是一个蓝色矩形。我使用该文件创建了两个QGraphicsSvgItem，并以90度旋转其中的一个。我把它们放在相同的位置，但是旋转的那个放错了位置(也许这才是正确的行为)。看起来x，y坐标(左上角)现在是右上角，它仍然没有旋转。从我的角度来看，这看起来很奇怪，我希望当我旋转和设置位置时，形状的“第一个点”应该是形状“开始”的地方。
我希望我上面写的源代码更容易理解：
SVGDom *bubbleDom = shadowgram->bubbl
浏览 5提问于2014-10-28得票数 0
我试图得到一个具有viewBox集的svg元素的左位置。viewBox基本上是一个正方形，而实际的svg元素则是矩形的。在大多数情况下，这不是一个问题(在Chrome中，一切都很好)，但是，当试图在火狐中获取元素的左侧位置时(因为viewBox是方形的)，火狐会报告viewBox的左边位置，而不是svg元素。
请参阅中的一个示例，该示例将使事情变得明显起来。
基本上，在Chrome中，左边位置报告的数字是8--这是我想要的数字。在Firefox中，它被报道为108。我如何让Firefox也报告数字8呢？
代码
HTML
<div>
<svg viewBox="
浏览 0提问于2013-08-29得票数 0
回答已采纳
2回答
SVG变换-水平翻转
、、、、
我需要水平翻转这个SVG --在网上找不到任何东西。这就是它：
<svg id="bigHalfCircle" style="display: block;" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path
浏览 4提问于2017-04-25得票数 25
回答已采纳
2回答
图片库工作不正常
、、
我有一个无序的列表中的12个图像在3个冒号x 4行库。悬停时，将应用变换比例。
如何将(3n+1)图像(图像1-4-7-10 )的变换原点设置为左侧，将第3n个(3 -6-9-12)元素的变换原点设置为右侧？
我试着在这里输入html和css，但得到了错误信息。
浏览 1提问于2014-02-06得票数 0
我为正在创建的天气应用程序制作了一个SVG-CSS3动画。我遇到了一些我自己也搞不清楚的事情。
我正在尝试让雪花在下落时也在它们自己的中心旋转。然而，我不能弄清楚如何让它们在下落时围绕自己的中心旋转。我尝试过的每种旋转方法似乎都想通过viewBox的角和中心来旋转它。我相信这实际上是正确的结果，但并不完全是我想要做的。
同样，只要让雪花在落在自己的中心时也旋转即可。如果最终需要，添加Javascript是可以的。
/* ----- Holders ------- */
.icon_holder {
width: 100%;
height: auto;
t
浏览 0提问于2018-09-28得票数 0
2回答
因此，我意识到我在这里冒险超出了画布的预期用途，并且可能不得不提出一个更手动的解决方案。然而，由于我对WPF没有太多的经验，我希望有一些解决方案可以让我继续使用画布控件和它免费提供给你的功能。
这个问题围绕着一个画布，该画布用于放大和缩小图像，以及属于画布的一些子控件。这些子控件将放置在图像上的不同位置，因此，画布工作得很好，因为它在我放大或缩小时为我处理所有的布局/定位。
然而，一个缺点是，当我放大图像时，画布会放大这些子控件，导致它们变得太大而无法在实践中使用。我正在寻找的是一种解决方案，允许我放大属于画布的图像，而不会同时放大子控件的大小，最好是为我处理布局。
当缩放因子增加或减少时，我
浏览 1提问于2011-05-16得票数 6
回答已采纳
1回答
d3地理地图溢出
、、、
我尝试在div中显示我的地图--但我希望这个地图仅限于div-size --现在，它也忽略了w，h值和vis css设置。
设置svg的高度和宽度有意义吗？当我把投影的比例放上去时，它总是比组织的规模更大。svg。
var w = 200;
var h = 300;
// this will attach a svg-element with the class "map" to "mydiv"
var map = d3.select("#mydiv").append("svg:svg")
.attr("widt
浏览 0提问于2012-08-19得票数 1
回答已采纳
1回答
我想将变换应用于SVG中的独立对象，然后对该变换进行动画处理。
我可以这样做：
<rect (...) transform="rotate(30)" />
<circle (...) transform="rotate(30)" />
(...)
<path (...) transform="rotate(30)" />
但之后我必须分别对每个元素进行动画处理。
我想要做的是：
<defs>
<transform id="rotation">
<rota
浏览 0提问于2013-04-23得票数 1
回答已采纳
我对transform-origin属性感到困惑。
根据，这是一个。
根据，它不是可以用作SVG元素属性的CSS属性。但是，根据同一页面，大多数浏览器都将其作为属性来支持。根据，它听起来像是一个SVG属性。
其他SVG用户代理/编辑器(如Inkscape )似乎既不支持属性，也不支持样式属性。Inkscape使用它自己的inkscape:transform-center-x和inkscape:transform-center-y属性。
transform-origin是标准的SVG 2属性吗？
如果不是，为什么浏览器支持transform-origin属性？
有什么
浏览 1提问于2021-09-18得票数 1
回答已采纳
我将一个svg文件加载到一个object标记中，并希望对其进行动画处理。我这里有一段简单的测试代码，但有一个问题：
在我的第二个css规则中，我的目标是#main，它恰好是svg元素旁边的g的id。我希望g标记具有动画效果，但它没有。如果我用#svgA替换#main，那么它就可以工作。有人知道如何用css3定位svg标签的内容吗？
谢谢
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
浏览 0提问于2015-06-27得票数 1
2回答
我想在CSS中使用transform-origin来模拟transform: translate的属性。
，这是非常可能的：
应用该属性的方法是:首先将元素转换为属性的负值，然后应用元素的转换，然后通过属性值进行转换。
然而，当我尝试的时候，我得到了不正确的结果。这两个长方形显然不一样：
.origin {
transform-origin: 100px 100px;
transform: translate(100px, 0px) scale(2) rotate(45deg);
}
.translate {
transform: translate(-100px,
浏览 1提问于2018-06-28得票数 2
回答已采纳
我是一个平面设计的学生，这是我在这里的第一个问题。对于我的一个项目，我正在尝试为rss提要做一个图形旋转显示。十行新闻馈送组成了一个顺时针旋转的星星。我是一个初学者，当涉及到jQuery，Ajax和PHP。我的老师一直在帮助我，但由于时间有限，他无法以一种让我理解一切的方式向我解释一切。因此，我被一段代码卡住了，除了以我想要的方式旋转外，它或多或少都能做我想做的事情。
它应该顺时针旋转，并在刷新时继续旋转，但不知何故，几秒钟后，不同的线开始逆时针旋转。我认为这与设定的旋转角度有关，但我不知道如何解决它。
到目前为止，这是我的代码: index.html
<html>
浏览 2提问于2015-05-02得票数 2
在鼠标悬停时，图标应该变得更大，这已经可以正常工作，但图标会增长到底部。
html和css：
<div id="container">
<ul>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
<li><img src="test.jpg" /></li>
<li>&
浏览 1提问于2011-10-31得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
