个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我会将箭头放在路径的不同区域。实际上我正在使用 textPath。
textPath 的问题在于它与路径相关联，我无法在它们之间放置元素(例如路径上方但箭头下方的圆圈)。此外，我仅限于文本字符来绘制箭头。
是否可以在没有 textPath 的情况下做同样的事情？我会使用自己绘制的箭头并按照其方向将其放在线上吗？
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<circle cx="75" cy="45" r="5" fill="blue"/>
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<!-- </defs> -->
<text dominant-baseline ='central'>
<textPath href="#MyPath" startOffset='100%' text-anchor='middle'>⯈</textPath>
</text>
</svg>最佳答案
这是js解决方案:
let len = MyPath.getTotalLength()
requestAnimationFrame(draw);
function draw(t){
requestAnimationFrame(draw);
let p1 = MyPath.getPointAtLength((t/33)%len);
let p2 = MyPath.getPointAtLength((t/33)%len + 10);
let a = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI
triangle.setAttribute('transform', `translate(${p1.x},${p1.y})rotate(${a})`)
}<body style="overflow:hidden;margin:0">
<svg viewBox="0 0 100 100" width=100vw height=100vh>
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<circle cx="75" cy="45" r="5" fill="blue"/>
<path id=triangle d="m0,0 v-5l10,5l-10,5z"/>
</svg>
</body>关于javascript - 在不使用 textPath 的情况下在 svg 路径上绘制箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57923530/
25
4
0
我在将 TextPath 元素与 svgwrite 库一起使用时遇到问题。我遵循文档 https://pythonhosted.org/svgwrite/classes/text.html#textp
我想沿着我的 SVG 路径对齐文本，但是，SVG 似乎不想将其与所有字母的正确旋转线上方对齐: 如何将文本对齐到曲线上方，以便其可读，而不是像上图所示？ 我使用Snap.SVG库来进行 SVG 操作，
下面是 SVG 代码，将路径上的文本倒置显示。请帮助展示如何正确显示它。 Some Text→ 最
默认情况下，SVG 以逆时针方式围绕路径环绕文本。文本的天花板粘在路径上。如何将方向更改为顺时针，使文本的底部贴在圆周上而不是天花板上？ .textspace { letter-spacing: 5p
我正在尝试根据我发现的一些示例制作一个动画旭日图，它可以缩放和更改数据表示形式:Vasco , Visual Cinnamon , David Richard等等 我无法让动画部分正常工作。弧正在更新
我正在尝试使用 svg.js 将文本放置到路径上 这是我的 fiddle : https://jsfiddle.net/Byteschmiede/ytz67egn/1/ var draw = SVG(
我在这里遇到了一个大问题。我需要翻转 180 度的 svg 元素的 textPath 标记中有一些文本。我已经使用了所有适用于 css 的方法，但绝对没有用。谁能帮我翻转元素内的文本。 functio
我在我的项目中使用SVG，并且希望在textpath元素上使用toggleClass与jQuery点击。 所以我在想: $("text#names > textpath").click(functio
对于 svg.js我写了一个添加 textPath 功能的小插件。该插件非常简洁: // textpath plugin SVG.TextPath = function() { this.co
我正在将 SVG 图形导出(使用 d3.js 库)到 PNG。问题是标签 textPath。导出为 PNG 时，文本不会出现。有谁知道这个问题是否有解决方案？ 我用来进行转换的代码是: var svg
如何使路径 ( see screenshot) 上的文本扩展，使其跟随整个 textPath？ 我试过使用 method attribute value stretch 但它没有像我预期的那样工作 -
有没有办法使用 SnapSVG 来使用文本路径？我尝试使用 textPath 作为属性，但它似乎没有在文本节点中添加 textpath 元素。 var txtpth = s.path("M70 70
我会将箭头放在路径的不同区域。实际上我正在使用 textPath。 textPath 的问题在于它与路径相关联，我无法在它们之间放置元素(例如路径上方但箭头下方的圆圈)。此外，我仅限于文本字符来绘制箭
这是我想要实现的目标的图像。 我有一些沿着路径弯曲的文本。我想在文本的开头和/或结尾放置一个 SVG 图像。在此示例中，它是一条丝带。但是如何将功能区放置在文本的开头/结尾，并使其旋转与路径上的文本匹
我正在尝试通过内联 SVG 在图像上叠加曲线文本。它在 Chrome 中运行良好，但 iOS 和桌面上的 Safari 无法呈现文本。
我想动态创建一个textPath，所以我这样写: function makeSVG(tag, attrs) { var el = document.createElementNS('h
是否可以内联定义 textPath 的路径，而不是创建 def 并将其作为 xlink:href 作为属性引用？ My text along a
我遇到与 SVG 相关的带圆圈文本的问题。我的目标是创建一条路径，让我可以在上面书写，但也可以让文本居中，同时仍然跟踪我的路径 - 从圆圈的顶部开始。 示例 That's what it looks
我有一个图表，其中使用 textPath 沿着其中一个路径编写了一些文本。但是，我的问题是:我需要文本位于文本路径的另一侧，即位于其下方。 下面是一个例子: 我需要此处的文本位于纯蓝色区域内。也就是说
我在使用 snap.svg 为文本设置动画时遇到问题。我正在围绕圆弧移动文本，从圆弧的左下角到其顶点。我使用标准 Snap.animate 功能及其内置 setter 函数。 当我为随机元素(例如我在
我是一名优秀的程序员,十分优秀！