使用CSS阻止SVG文本旋转

文章/答案/技术大牛

发布

1回答

html、css、svg

我创建了一个包含文本元素的SVG圆。我想用CSS变换来旋转SVG，但是我不想旋转文本元素。 stroke-dasharray: 339.292;} <svgclass="progress__value" cx="60" c

浏览 15提问于2017-07-29得票数 0

回答已采纳

1回答

SVG文本不在Safari上呈现，但在Chrome上呈现

google-chrome、svg、safari

我有一些在中间有文本的SVG组件-这个文本在Chrome上渲染得很好，但在Safari上就不出现了。以下是两种浏览器之间的区别： ? ? 我不确定问题出在哪里。我该如何解决这个问题？editors=1100 我已经使用以下代码完成了这项工作： <svg style="width: 250px; height: 250px" class="progress-c

浏览 27提问于2021-01-12得票数 0

1回答

将旋转SVG裁剪为HTML/CSS中的文本

html、css、svg、css-animations、clip-path

我有一个使用动画旋转的SVG图像，以及它旁边的一个文本元素。每当星光较亮的部分与文字重叠时，我希望文字的那一部分改变颜色。基本上，恒星爆发应该剪辑到文本，同时旋转。CSS动画旋转的。在使用clip-path和background-clip这样的属性之后，我似乎无法让SVG既旋转又剪辑到文本。我还尝试将文本放在svg <text>元素中

浏览 15提问于2022-12-04得票数 0

3回答

SVG文本旋转

svg、jquery-svg

我有一个文本与textContent“设计”，这是转换与css旋转90度围绕中心(100,100)，所以它垂直显示。它围绕中心旋转整个坐标系，我希望元素(即“设计”)单独应该旋转结果：期望值：SVG：<text x="70" y="30" width="64" height="16" fill="bla

浏览 8提问于2013-05-23得票数 5

1回答

and图旋转和LaTex文本

jsxgraph

但是当我用LaTex机制(Mathjax)替换文本时，它失败了。为什么

浏览 5提问于2021-05-14得票数 0

回答已采纳

1回答

使用css围绕中心文本位置旋转svg文本

css、svg、rotation、overwrite

我想对SVG中的一组元素应用一个css旋转变换，这样每个元素都可以独立旋转，而不必计算css中每个元素的中心。例如，我有一个看起来像左边的图片的SVG，并且想要应用css来实现右边的效果 ?transform="translate(100 100)" text-anchor="middle">Text 2</text> </svg> 当我应用css</

浏览 34提问于2020-04-25得票数 4

回答已采纳

1回答

用svg图覆盖X轴标号

javascript、html、css、reactjs、svg

下面是我添加上述css的代码行 x={125 + rowIndex * 60} textAnchor="middle" style={{ fill: 'red

浏览 7提问于2021-12-01得票数 0

回答已采纳

2回答

如何使用css旋转SVG文本

javascript、css、svg、c3.js

我正在使用c3.js生成一个图表。问题是i不能改变xgrid上的文本元素的位置。我希望它们是水平的。但是，每当我尝试使用旋转时，元素就会移出svg。我如何才能将它们精确地放置在适当的位置，而使它们保持水平下面是我尝试过的css，完整的代码请参阅js fiddle。

浏览 0提问于2016-02-19得票数 8

2回答

如何使用d3在单击时翻转x-y轴

charts、d3.js、flip

我正在使用d3图表来绘制一些图表。我正在寻找一种可以通过点击按钮来翻转我的轴的东西。话虽如此，我的意思是，我正在寻找的功能，无缝地工作于所有类型的图表，如条形图，线条，堆栈等。

浏览 7提问于2013-11-21得票数 0

2回答

SVG文本围绕中心旋转

jquery-svg

我有与textContent“设计”的文本和文本锚作为开始，这是与css转换为45度旋转。所以它被旋转了。问题是，我需要在旋转后调整文本的(x，y)位置，以显示刻度之间的文本，如预期的图所示。结果： <svg> <text x="100" y="100" width="64" height="16" fill=&q

浏览 1提问于2013-05-24得票数 6

2回答

SVG CSS3动画的奇怪行为

css、animation、svg

在此之前，我应该说，我对SVG世界是全新的。我正在尝试一个使用SVG和CSS3动画的相当简单的实验。从我下面的链接中可以看到，整个SVG会奇怪地反弹，这可以通过从CSS中删除.arm类来删除。(这会停止具有arm类的单个红色圆圈组)。问题是，我希望红色圆圈组动画(旋转)，而整个

浏览 1提问于2013-02-28得票数 2

回答已采纳

2回答

有没有任何方法可以使用纯Javascript/Jquery旋转SVG元素而不使用CSS3 transfrom。:rotate(90deg) dosen;t似乎在使用SVG元素。transform:rotate(90deg)正在旋转普通图像，但是无法在IE (IE11)中旋转SVG元素。所以，我在用JS搜索一些替代的东西。找到这个jqueryrotate.com插件，但是，这似乎是使用<e

浏览 4提问于2016-05-21得票数 0

回答已采纳

2回答

如何为动画持续时间较短的元素制作连续动画[喘息]

javascript、jquery、css、gsap

repeat: -1 tween_options_to = { .to($('svg > #XMLID_26_'), 5, tween_options_to, 0) .to($('svg现在，我想要在上面的动画中发生的是，最外面的多边形应该旋转(它们

浏览 6提问于2016-04-14得票数 9

回答已采纳

1回答

利用d3旋转SVG图像元素

javascript、image、svg、d3.js、rotation

我想使用d3.js在SVG元素中旋转图像环顾四周，这似乎是一项很容易的任务。我需要做的是旋转图像元素，因为它总是在垂直位置。我的意思是，如果我得到一个方向为90顺时针方向的图像，我想逆时针旋转90度。如果我得到一个方向为270度的图像，我需要逆时针旋转270度，以此类推。我从后端得到这个方向值，所以我需要一个函数来更新图像的旋转，但是即使是浏览器中图像的这个基本旋转也不起作用，我不知道我应该做什么。甚至不确定是应该旋

浏览 4提问于2021-12-19得票数 0

回答已采纳

2回答

svg文本转换--旋转文本标记的x和y位置

html、css、svg

与transform=“旋转(0)”<html> <text x="0" y="175" transform="rotate(0)" fill="red">I love SVG!</text> Sorry, your browser does not suppor

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

回答已采纳

1回答

是否有一种方法可以可靠地在可调整大小的图形中旋转SVG文本？

svg、text

我正在构建一个SVG，它用轴标签显示一个相当标准的X图。我希望y轴标签(在图的左边)垂直显示，整个文本旋转90度。我的SVG是使用%计算的各种大小和距离构建的，因此可以这样呈现一行：这样做是为了使图形“调整大小”，以填补任何由封闭的应用程序我知道如何旋转文本(transform=&qu

浏览 0提问于2018-10-22得票数 0

1回答

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

css、svg、rotation、transform

背景：transform: rotate(45deg);但我知道当我将SVG</em

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

回答已采纳

1回答

C3js:如何移动和旋转网格线文本？

css、c3.js

如何使用CSS或另一种方法：(b)将文本顺时针旋转90度，并向左、向右移动？更新:我使用的是React-c3js，所以我不能简单地选择一个SVG元素并转换和旋转它(因此建议使用CSS)。

浏览 1提问于2018-10-26得票数 1

回答已采纳

3回答

使用具有特定程度的jQuery旋转DIV？

javascript、jquery、css

可能重复：如何使用jQuery在一定程度上旋转一个DIV和所有元素？比如不只是90,180等。我可以把它设为88。

浏览 3提问于2011-04-04得票数 4

回答已采纳

1回答

如何使文本在弯曲路径上来回移动HTML CSS

html、css、text

我试图让文本"sample text sample text“在曲线上来回移动。正如你在代码片段中看到的，我已经能够在一条直线上来回移动，但我不知道如何使它弯曲，并让它沿着这条弯曲的路径移动。另外，如果有人能帮我在文本到达路径的尽头时加快“缓解”速度，那就太好了。 <!link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.

浏览 21提问于2021-01-13得票数 0

点击加载更多