- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用此 SVG 时遇到两个问题。首先,我需要它来使用 Raleway 字体。其次,我需要相反的文字。我尝试过使用 CSS 平移和旋转,但它们没有提供我正在寻找的结果。我已经阅读了 SVG 样式的文档,但它没有什么帮助,并且没有满足我的特殊需求。我也通过 Google 进行了搜索,他们只建议了我已经尝试过的东西。
我在下面添加了一些代码以供引用。
// JavaScript that was graciously provided for me:
const rad = Math.PI / 180;
let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
testGroupC2.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`)
// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);
// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);
let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);
let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);
let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);
let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);
let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);
let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);
let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);
/*
No rounded corners
let d = `M${x1},${y1} A${R},${R},0 0,1 ${x2},${y2}
L${x3},${y3} A${r},${r},0 0,0 ${x4},${y4}
L${x1},${y1}Z`;*/
/*
Beveled corners
let d = `M${x1},${y1}
A${R},${R},0 0,1 ${x2},${y2}
L${x21},${y21}
L${x31},${y31}
L${x3},${y3}
A${r},${r},0 0,0 ${x4},${y4}
L${x41},${y41}
L${x11},${y11}
L${x1},${y1}Z`;*/
// Rounded corners with quadratic Bézier curves
d = `M${x1},${y1}
A${R},${R},0 0,1 ${x2},${y2}
Q${px2},${py2} ${x21},${y21}
L${x31},${y31}
Q${px3},${py3} ${x3},${y3}
A${r},${r},0 0,0 ${x4},${y4}
Q${px4},${py4} ${x41},${y41}
L${x11},${y11}
Q${px1},${py1} ${x1},${y1}Z`;
testPath2.setAttributeNS(null,"d",d);
<svg viewBox="0 40 100 40">
<g id="testGroupC2" >
<style type="text/css">
<![CDATA[
@import url('https://fonts.googleapis.com/css?family=Raleway:thin');
text{font-family:Raleway; z-index: 20}
]]>
</style>
<path id="testPath2"/>
<text>
<textpath style="font-size:4pt;" xlink:href="#testPath2" startOffset="63%" >
<tspan x="-3" y="10">Home</tspan>
</textpath>
</text>
</g>
</svg>
最佳答案
您可以采用底部曲线并将其用作文本的路径。它必须是相反的顺序,否则(就像代码中的情况一样)文本将显示在路径下方并旋转(实际上是路径的方向)。
因此:仅用于文本的额外路径以及对文本对齐方式的一些调整
结果如下:
// JavaScript Document
const rad = Math.PI / 180;
let cx = 50, cy = 100, R = 50, r = 35, A = 40 , a = 5, o=4;
// o for offset
testGroupC2.setAttributeNS(null, "transform", `rotate(${-90 -(A / 2) - a} ${cx} ${cy})`)
// control points for the quadratic Bézier
let px1 = cx + R * Math.cos(0);
let py1 = cy + R * Math.sin(0);
let px2 = cx + R * Math.cos((2*a + A)*rad);
let py2 = cy + R * Math.sin((2*a + A)*rad);
let px3 = cx + r * Math.cos((2*a + A)*rad);
let py3 = cy + r * Math.sin((2*a + A)*rad);
let px4 = cx + r * Math.cos(0);
let py4 = cy + r * Math.sin(0);
// points used to draw the shape
let x11 = cx + (R-o) * Math.cos(0);
let y11 = cy + (R-o) * Math.sin(0);
let x1 = cx + R * Math.cos(a*rad);
let y1 = cy + R * Math.sin(a*rad);
let x2 = cx + R * Math.cos((a + A)*rad);
let y2 = cy + R * Math.sin((a + A)*rad);
let x21 = cx + (R-o) * Math.cos((2*a + A)*rad);
let y21 = cy + (R-o) * Math.sin((2*a + A)*rad);
let x31 = cx + (r+o) * Math.cos((2*a + A)*rad);
let y31 = cy + (r+o) * Math.sin((2*a + A)*rad);
let x3 = cx + r * Math.cos((a + A)*rad);
let y3 = cy + r * Math.sin((a + A)*rad);
let x4 = cx + r * Math.cos(a*rad);
let y4 = cy + r * Math.sin(a*rad);
let x41 = cx + (r+o) * Math.cos(0);
let y41 = cy + (r+o) * Math.sin(0);
/*
No rounded corners
let d = `M${x1},${y1} A${R},${R},0 0,1 ${x2},${y2}
L${x3},${y3} A${r},${r},0 0,0 ${x4},${y4}
L${x1},${y1}Z`;*/
/*
Beveled corners
let d = `M${x1},${y1}
A${R},${R},0 0,1 ${x2},${y2}
L${x21},${y21}
L${x31},${y31}
L${x3},${y3}
A${r},${r},0 0,0 ${x4},${y4}
L${x41},${y41}
L${x11},${y11}
L${x1},${y1}Z`;*/
// Rounded corners with quadratic Bézier curves
d = `M${x1},${y1}
A${R},${R},0 0,1 ${x2},${y2}
Q${px2},${py2} ${x21},${y21}
L${x31},${y31}
Q${px3},${py3} ${x3},${y3}
A${r},${r},0 0,0 ${x4},${y4}
Q${px4},${py4} ${x41},${y41}
L${x11},${y11}
Q${px1},${py1} ${x1},${y1}Z`;
testPath2.setAttributeNS(null,"d",d);
/* based on the 2nd A-curve of the testPath,
but last point and starting point switched,
as well as the sweep-flag of the curve */
dtext = `M${x4},${y4}
A${r},${r},0 0,1 ${x3},${y3}`;
textPath.setAttributeNS(null,"d",dtext);
<svg viewBox="0 40 100 40">
<defs><path id="textPath"/></defs>
<g id="testGroupC2" >
<style type="text/css">
<![CDATA[
@import url('https://fonts.googleapis.com/css?family=Raleway:thin');
text{
font-size: 4pt;
fill: #ffffff;
text-anchor: middle;
font-family: 'Raleway';
z-index: 2;
}
]]>
</style>
<path id="testPath2"/>
<text>
<textpath xlink:href="#textPath" startOffset="50%" >
<tspan x="0" dy="-5.5">Home</tspan>
</textpath>
</text>
</g>
</svg>
关于javascript - SVG tspan 的定位和样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53038255/
不知为何定位tspan即使 tspan 元素也会保留标签已关闭。 123 http://jsfiddle.net/4fzqmeud/1/ 两个号码 2和 3受 tspan 的影响定位即使只
如何通过javascript或jquery从DOM中删除tspan元素? abc.com 注意:tspan 没有定义 id 或 class,该元素是通过 ajax 请求动态生成的。 一般来说,我的问题
我正在寻找一种方法来倾斜 tspan与 transform="skewX(-45)" ,但它似乎只适用于父 text作为一个整体。问题是想包围tspan s 不受偏斜的影响,只有中间的一个。我不想使用
我有这个代码: " + ¥5,000.00 + " 这显示了这个:¥5,000.00 我想要的是向我展示中国国旗,如下所示:尝试了很多方法,还是不行。其中之一是
从已经包含类似内容的 DOM 开始 ...我想以编程方式修改 d3.select("#svg0") 中的元素所以我最终得到 Lorem ipsum dolor sit amet 这是我所能得
我在使用此 SVG 时遇到两个问题。首先,我需要它来使用 Raleway 字体。其次,我需要相反的文字。我尝试过使用 CSS 平移和旋转,但它们没有提供我正在寻找的结果。我已经阅读了 SVG 样式的文
我想分割用户在输入文本框中输入的文本并附加到 svg 文本的 tspan 中 示例: 输入的文本例如:“我有一些文本在此容器中换行成三行” 我想让我的 jquery/javascript 解析这些行
我正在使用 d3js,其中 lib 根据数据创建节点和链接。在某些地方,有一些特定的要求,需要在同一行中添加多个文本,例如 url“www.xyz.com/home/user”(此处为 3 个字符串“
我尝试遵循其他用户对此的提示,但似乎我没有得到正确的结果或者根本无法完成。我正在尝试使用 tspan 标签将图像添加到 SVG 文本标签。感谢任何建议。 这是片段:https://jsfiddle.n
svg { width: 100%; height: 100px; border: solid 1px blue; font-family: monospace; tr
这是我在 Canvas 上移动文本的代码: paper .text(self.x, self.y, "Jeaaaaaaaaaaaaaaah") .attr({ fill:
CSS @keyframes moveText { 0% { y:100; } 100% { y:300; } } #Achieve t
我正在为 SVG 图像 (v2.0) 渲染多行文本。每个文本行都表示为一个 tspan 元素。我循环遍历所有 tspan,并将它们作为新子元素附加到文本元素 (this.node)。 while (t
我目前有以下结构 svg g circle text text text text tspan class='minus-clicks' ...
我有一些创建树状图的 D3.js 代码,但是我正在尝试稍微更改代码以阻止为值为 0 的元素打印不必要的标签。 以下代码似乎添加了 tspan 并为其赋予文本值。但是,如果从 .text(functio
我拆开一个大的 SVG 并发现了这个奇怪的故障 (fiddle here) Word1 Word2 用一行 CSS: svg { text-tr
我正在尝试在 svg 按钮内的 tspan 元素内指定字体系列。它似乎没有注册,我也找不到任何关于此的文档。我只找到了 svg 中文本元素的文档。我的无数次尝试都没有使文本与网站其余部分的风格相匹配。
我目前正在使用 BeautifulSoup 进行 xml 解析,但不知道如何从 tspan 标签中获取信息。我正在解析的 xml 如下所示: APPROX. BARREL WEIGHT (KG): &
我正在尝试在悬停时为 svg 文本元素的每个字母设置动画(制作然后跳转)。为此,我将每个字母都放在 中。并在其上添加动画,无论如何变换不起作用。 Test svg text tspan {
我在 SVG 上遇到字体大小问题,因为我们可以在 svg 中看到 font-size:16px 与 paragraph font-size 不同,但它们具有相同的值 16px .我想在段落中使用 sv
我是一名优秀的程序员,十分优秀!