svg，防止文本倒置
我在svg中有一个路径，它的原点在右边，下面的点在左边，然后我在svg中添加一个textPath，所有的文本都是颠倒的。 如何保持文本笔直并始终从左到右显示？ 这花了我很多时间！ 谢谢你的回答svg，防止文本倒置,svg,Svg,我在svg中有一个路径，它的原点在右边，下面的点在左边，然后我在svg中添加一个textPath，所有的文本都是颠倒的。 如何保持文本笔直并始终从左到右显示？ 这花了我很多时间！ 谢谢你的回答 <!DOCTYPE html> <html> <head> <style> </style> <script> function CreateSVG(points, container) {
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function CreateSVG(points, container) {
var id = "idSVG";
var ns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var lineWidth = 10;
var color = "rgba(120,120,120,0.7)";
var path = document.createElementNS(ns, "path");
path.setAttribute('stroke-linecap', 'round');
path.setAttribute('stroke-linejoin', 'round');
path.setAttribute('stroke-dasharray', 'solid');
path.setAttribute('fill', 'none');
path.setAttribute('id', id);
var _canvas = document.createElementNS(ns, 'svg');
_canvas.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', xlinkns);
_canvas.setAttribute('pointer-events', 'none');
//this._canvas.appendChild(this.path);
var defs = document.createElementNS(ns, "defs");
defs.appendChild(path);
var useSvg = document.createElementNS(ns, 'use');
useSvg.setAttributeNS(xlinkns, 'xlink:href', '#' + id);
useSvg.setAttribute('fill', 'none');
useSvg.setAttribute('stroke', 'red');
var textSvg = document.createElementNS(ns, 'text');
var textPathSvg = document.createElementNS(ns, 'textPath');
textPathSvg.setAttributeNS(xlinkns, 'xlink:href', '#' + id);
textPathSvg.appendChild(document.createTextNode('test text'));
textSvg.appendChild(textPathSvg);
_canvas.appendChild(defs);
_canvas.appendChild(useSvg);
_canvas.appendChild(textSvg);
var minX, maxX, minY, maxY, x, y, width, height;
for(var i = 0, len = points.length; i < len; i++) {
x = points[i].x;
y = points[i].y;
if(minX == undefined || minX > x) {
minX = x;
}
if(maxX == undefined || maxX < x) {
maxX = x;
}
if(minY == undefined || minY > y) {
minY = y;
}
if(maxY == undefined || maxY < y) {
maxY = y;
}
}
minX = minX - lineWidth;
minY = minY - lineWidth;
width = maxX - minX + lineWidth;
height = maxY - minY + lineWidth;
_canvas.setAttribute('style', 'position:absolute;');
_canvas.setAttribute('width', width);
_canvas.setAttribute('height', height);
_canvas.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
_canvas.setAttribute('stroke', 'true');
path.setAttribute('stroke-width', lineWidth);
path.setAttribute('stroke', color);
var d = [];
for(var i = 0, len = points.length; i < len; i++) {
d[i] = (points[i].x - minX + lineWidth / 2) + ',' + (points[i].y - minY + lineWidth / 2);
}
path.setAttribute('d', 'M' + d.join(' '));
container.appendChild(_canvas);
}
</script>
</head>
<body onload="CreateSVG([{x:200, y:200}, {x:40, y:60}], document.getElementById('svgContainer'))">
<div id="svgContainer"></div>
</body>
</html>
函数CreateSVG（点、容器）{
var id=“idSVG”；
变量ns=”http://www.w3.org/2000/svg";
var xlinkns=”http://www.w3.org/1999/xlink";
var线宽=10；
var color=“rgba（120120,0.7）”；
var path=document.createElements（ns，“路径”）；
setAttribute（'stroke-linecap'，'round'）；
setAttribute（'stroke-linejoin'，'round'）；
setAttribute（'stroke-dasharray'，'solid'）；
setAttribute（'fill'，'none'）；
path.setAttribute（'id'，id）；
var_canvas=document.createElementNS（ns，'svg'）；
_canvas.setAttributeNS（'http://www.w3.org/2000/xmlns/'、'xmlns:xlink'，xlinkns）；
_setAttribute（'pointer-events'，'none'）；
//this._canvas.appendChild（this.path）；
var defs=document.createElements（ns，“defs”）；
defs.appendChild（路径）；
var useSvg=document.createElementNS（ns，“use”）；
useSvg.setAttributeNS（xlinkns，'xlink:href'，'#'+id）；
useSvg.setAttribute（'fill'，'none'）；
setAttribute（'stroke'，'red'）；
var textssvg=document.createElementNS（ns，“text”）；
var textpathssvg=document.createElementNS（ns，“textPath”）；
setAttributeNS（xlinkns，'xlink:href'，'#'+id）；
extPathSVG.appendChild（document.createTextNode（“测试文本”）；
appendChild（textPathSvg）；
_canvas.appendChild（defs）；
_canvas.appendChild（useSvg）；
_canvas.appendChild（textSvg）；
变量minX，maxX，minY，maxY，x，y，宽度，高度；
对于（变量i=0，len=points.length；ix）{
minX=x；
}
if（maxX==未定义的| | maxXy）{
minY=y；
}
if（maxY==未定义的| | maxY direction=“rtl”