SVG渐变部分显示不正常

hbghlyj

1. \documentclass{standalone}
2. \usepackage{tikz}
3. \begin{document}
4. \begin{tikzpicture}
5. \draw(0,0)circle(2);
6. \begin{scope}
7. \clip (0,0) circle (2);
8. \shade[inner color=white,outer color=orange] (-1,1) circle (3.4);
9. \end{scope}
10. \draw[fill=red](0.9,0)ellipse(0.6 and 1.7);
11. \filldraw[left color=white, right color=red](1,0)ellipse(0.6 and 1.7);
12. \draw[thick](0,0)--(0.3,0.42) (1.15,1.6)--(1.15,0.96);\draw[densely dashed](0.3,0.42)--(0.6,0.83) (0.8,1.11)--(1.15,1.6);
13. \draw(1.15,0.8)node{$r$} (0.7,0.97)node{$R$} (-0.1,-0.95)node{$\mathrm dx$};
14. \draw[thick](1.15,0.64)--(1.15,0);
15. \draw[thick](-2,0)--(0.3,0) (1.15,0)--(2,0);\draw[densely dashed](0.3,0)--(1.15,0);
16. \draw(0,-0.1)[<->]--(0,-0.3) (1.15,-0.1)--(1.15,-0.3) (0,-0.2)--node[below]{$x$}(1.15,-0.2);
17. \draw[->](0.2,-1)--(0.4,-1);\draw[<-](0.55,-1)--(0.75,-1);
18. \end{tikzpicture}
19. \end{document}

Copy the Code

用pdflatex编译出来是正常的: 1.pdf (22.02 KB, Downloads: 133)

2022-2-7 07:54 Upload

Click on the file to download the attachment

下面是用CloudConvert在线将pdf转换成的svg,效果完美

把dvi用dvisvgm转换

1. pdflatex -output-format=dvi 1.tex;dvisvgm 1.dvi

Copy the Code

报错:

1. pre-processing DVI file (format version 2)
2. processing page 1
3. PostScript error: typecheck in setpattern
4. Operand stack:
5. --nostringval-- --nostringval-- --nostringval-- --nostringval--

Copy the Code

把pdf用dvisvgm转换成svg

1. pdflatex 1.tex;dvisvgm --pdf 1.pdf

Copy the Code

以后,渐变部分显示不正常.具体来说,是有两个渐变部分,那个大圆变成透明的,小的椭圆变成黑的:

hbghlyj

换成用inkscape将pdf转换成svg效果如下(椭圆的渐变丢失)

hbghlyj

换成pdf2svg将pdf转换为svg,效果完美,但是文件太大,超过了帖子的长度,我只好放到附件里: 1.svg (580.01 KB, Downloads: 173)

2022-2-7 08:49 Upload

Click on the file to download the attachment

hbghlyj

回复 1# hbghlyj
那个CloudConvert出来的svg好像里面有base64编码的png不是纯svg

kuing

回复 3# hbghlyj

是用一大堆碎片拼起来的渐变？

hbghlyj

回复 5# kuing
是defs里面有linearGradient和radialGradient实现的渐变吧

kuing

回复 6# hbghlyj

那这里面的一大堆 stop 是啥意思

kuing

我想是不是可以手动改写这个 linearGradient 和 radialGradient 实现同样的渐变？

kuing

回复 2# hbghlyj 将 2# 的 linearGradient 里面的那 5 个 offset offset="0" offset="25.00032" offset="50.00064" offset="75.00096" offset="100.00128" 改成 offset="0%" offset="25%" offset="50%" offset="75%" offset="100%" 椭圆的渐变就正常了。 另外其实圆的颜色也比 PDF 浅，radialGradient 里的也得改一下。 在这里重发一个，但 id 冲突，还得改 id，真麻烦……
好了

hbghlyj

回复 7# kuing
SVG Element - stop

一个渐变上的颜色坡度，是用stop元素定义的。stop元素可以是<linearGradient>元素或者<radialGradient>元素的子元素。

应该是渐变的"插值节点"

hbghlyj

回复 9# kuing
那个x本来是斜体的,经inkscape处理以后变成直体了

hbghlyj

回复 9# kuing
是lineargradient的offset属性必须加%号?但是radialgradient不必加%号?好奇怪

kuing

回复 12# hbghlyj

我也不是很了解，我看网上的教程，全都是 % 的，我 9# 也都改成了 %。

hbghlyj

回复 13# kuing
我把worker.js稍微修改了一下,把dvisvgm换成pdf2svg,渐变都是正常的了

kuing

回复 14# hbghlyj

但太大了，一堆多余的 stop 也算了，后面还有一条超长的路径，似乎还是和圆的渐变有关。
我怀疑它在转换时是分成了很多个环形，一圈一圈的，所以才会出现这么多 stop，路径才会那么长。

kuing

回复 15# kuing

果然如此！
我将你那帖的第 6 题的图下载下来，用文本编辑器打开，将第 441 行（也就是超长路径那行）的
<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);"
改成
<path style=" stroke-width:0.1;stroke:#0f0;fill:none;"
然后再用浏览器打开，放大看就是这样的：


而且每个圈似乎都是用 L 来连线的，太baoli，太不科学了……

hbghlyj

下面是用CloudConvert在线将pdf转换成的svg,效果完美

它的渐变部分是一个PNG图片(base64编码的).
不知CloudConvert后台用什么程序将PDF转换成SVG

hbghlyj

PostScript error: typecheck in setpattern

根据Postscript Troubleshooting, 上面的typecheck error的解释:
Some operand's type is different from what an operator expects. This is probably the most frequent error encountered. It is often the result of faulty stack manipulation, such as operands supplied in the wrong order or procedures leaving results on the stack when they are not supposed to.

Certain operators require dictionaries or other composite objects as operands, constructed according to specific rules (for example, pattern dictionaries or user paths). A typecheck error can occur if the contents of such objects are of incorrect type or are otherwise malformed.

hbghlyj

Asymptote的RadialShade导出SVG会产生<radialGradient>且显示正常