Question

我正在尝试在text / tspan svg元素中使用文本换行。我本质上是尝试采用这样的代码:(忽略文本包装部分的内容）

<svg>
    <g>
        <text>
             Date: date here
            <tspan>this is a list item</tspan>
            <tspan>this is another list item</tspan>
        </text>
    </g>
</svg>

我试图让它像无序的HTML列表一样：

Date: date here
<ul>
    <li>this is a list item</li>
    <li>this is another list item</li>
</ul>

有办法做到这一点吗？

Answer 1

在SVG中，您需要手动定位每行文字。

您可以为每行使用单独的int readData(int j){ return recv(j, buf , nbytes , 0); } int sendData(int j){ unsigned v = fcntl(j, F_GETFL, 0); fcntl(j, F_SETFL, v | O_NONBLOCK); return send(j, buf, nbytes, 0); } fd_set master; fd_set read_fds; fd_set write_fds; int fdmax; ... FD_ZERO(&master); FD_SET(socket, &master); fdmax = socket; for(;;){ FD_ZERO(&read_fds); FD_ZERO(&write_fds); read_fds = master; write_fds = master; if(select(fdmax+1, &read_fds, &write_fds, NULL, NULL) == -1){ exit(4); } for(i = 0; i <= fdmax; i++){ if(FD_ISSET(i, &read_fds)){ if(i == socket){ // handle new connections addrlen = sizeof remoteaddr; newfd = accept(socket, (struct sockaddr *)&addr, &addrlen); FD_SET(newfd, &master); if(newfd > fdmax) fdmax = newfd; }else{ // we got some data from a client readData(i); } } else if(FD_ISSET(i, &write_fds)){ if(i != socket){ // send data when notified sendData(i); } } } }元素布局文本。例如......

<text>

或者您可以使用单个<svg> <g> <text x="0em" y="1em">Date: date here</text> <circle cx="1.75em" cy="2.75em" r="2px"/> <text x="2.5em" y="3em">this is a list item</text> <circle cx="1.75em" cy="3.75em" r="2px"/> <text x="2.5em" y="4em">this is another list item</text> </g> </svg>布局文本，每个换行符都有一个单独的<text>元素。例如......

<tspan>

修改：在每个列表项之前为点添加了<svg> <g> <circle cx="1.75em" cy="2.75em" r="2px"/> <circle cx="1.75em" cy="3.75em" r="2px"/> <text x="0em" y="1em"> Date: date here <tspan x="2.5em" dy="2em">this is a list item</tspan> <tspan x="2.5em" dy="1em">this is another list item</tspan> </text> </g> </svg>个元素。

带有svg和tspan

1 个答案: