覆盖SVG图形-与JavaScript文件相矛盾（Plotly/divert.pub）
我想为使用Plotly.js的出版物准备一个绘图 一切都按预期进行，直到我添加了在蒸馏（）上处理布局的脚本，然后所有图形都显示不正确： 是： 现在是： 我在浏览器中查看了该页面，发现Plotly生成了两个应该重叠的SVG（覆盖SVG图形-与JavaScript文件相矛盾（Plotly/divert.pub）,javascript,svg,plotly,plotly.js,Javascript,Svg,Plotly,Plotly.js,我想为使用Plotly.js的出版物准备一个绘图 一切都按预期进行，直到我添加了在蒸馏（）上处理布局的脚本，然后所有图形都显示不正确： 是： 现在是： 我在浏览器中查看了该页面，发现Plotly生成了两个应该重叠的SVG（）。如果添加提取脚本，SVG似乎保持不变，但现在不再显示在彼此的顶部（重叠） 是否有人知道如何解决此问题或解决此问题的方法 提前谢谢你 以下是html代码： <head> <script src="https://distill.pub/templ
<head>
<script src="https://distill.pub/template.v1.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var trace1 = {
x: [2, 8],
y: [0.25, 6],
text: ['filled triangle', 'Cubic Bezier Curves'],
mode: 'text'
};
var layout = {
title: 'Basic Arbitrary SVG Paths',
xaxis: {
range: [0, 9],
zeroline: false
},
yaxis: {
range: [0, 11],
showgrid: false
},
width: 500,
height: 500,
shapes: [
//Cubic Bezier Curves
{
type: 'path',
path: 'M 1,4 C 2,8 6,4 8,8',
line: {
color: 'rgb(207, 114, 255)'
}
},
//Filled Triangle
{
type: 'path',
path: 'M 1 1 L 1 3 L 4 1 Z',
fillcolor: 'rgba(44, 160, 101, 0.5)',
line: {
color: 'rgb(44, 160, 101)'
}
}
]
};
var data = [trace1];
function start() {
Plotly.newPlot("graph", data, layout);
}
</script>
</head>
<body onload="start()">
<div id="graph"></div>
</body>
变量trace1={
x:[2,8],，
y:[0.25,6]，
文本：[“填充三角形”、“三次贝塞尔曲线”]，
模式：“文本”
};
变量布局={
标题：“基本任意SVG路径”，
xaxis：{
范围：[0,9]，
零线：错误
},
亚克斯：{
范围：[0,11]，
showgrid:false
},
宽度：500，
身高：500，
形状：[
//三次贝塞尔曲线
{
键入：“路径”，
路径：“M1,4 C2,8 6,4 8,8'，
行：{
颜色：'rgb（207114255）'
}
},
//填充三角形
{
键入：“路径”，
路径：“m11l13l41z”，
fillcolor:“rgba（441601010.5）”，
行：{
颜色：'rgb（44160101）'
}
}
]
};
var数据=[trace1]；
函数start（）{
Plotly.newPlot（“图形”、数据、布局）；
}
- 添加提取模板.v1.js脚本或
- 删除plotly-latest.min.js脚本
<!DOCTYPE html>
<html>
<head>
<!-- deactivating this out breaks it-->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!--activating this breaks it, too-->
<!--<script src="https://distill.pub/template.v1.js"></script>-->
</head>
<body>
<div id="graph" class="js-plotly-plot">
<div class="plot-container plotly">
<div class="svg-container" style="position: relative; width: 500px; height: 500px;">
<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" style="background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
<g class="cartesianlayer">
<!--text annotations-->
<g class="plot" transform="translate(80, 100)" clip-path="url(#clipb71614xyplot)"><g class="scatterlayer mlayer"><g class="trace scatter trace365c60" style="stroke-miterlimit: 2; opacity: 1;"><g class="points">
<g class="textpoint" transform="translate(0,3)"><text x="75.56" y="312.73" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="filled triangle" data-math="N" text-anchor="middle">filled triangle</text></g>
<g class="textpoint" transform="translate(0,3)"><text x="302.22" y="145.45" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="Cubic Bezier Curves" data-math="N" text-anchor="middle">Cubic Bezier Curves</text></g>
</g></g></g></g>
<!-- numbers x-axis -->
<g class="xaxislayer-above"><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="0" data-math="N" transform="translate(80,0)">0</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="2" data-math="N" transform="translate(155.56,0)">2</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="4" data-math="N" transform="translate(231.11,0)">4</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="6" data-math="N" transform="translate(306.66999999999996,0)">6</text></g><g class="xtick"><text text-anchor="middle" x="0" y="433" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="8" data-math="N" transform="translate(382.22,0)">8</text></g></g>
<!--numbers y-axis-->
<g class="yaxislayer-above"><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="0" data-math="N" transform="translate(0,420)">0</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="2" data-math="N" transform="translate(0,361.82)">2</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="4" data-math="N" transform="translate(0,303.64)">4</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="6" data-math="N" transform="translate(0,245.45)">6</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="8" data-math="N" transform="translate(0,187.26999999999998)">8</text></g><g class="ytick"><text text-anchor="end" x="79" y="4.199999999999999" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 12px; fill: rgb(68, 68, 68); fill-opacity: 1; white-space: pre;" data-unformatted="10" data-math="N" transform="translate(0,129.09)">10</text></g></g>
</g>
</svg>
<svg class="main-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<!-- paths/shapes -->
<g class="layer-above">
<g class="shapelayer">
<path data-index="0" fill-rule="evenodd" d="M 117.78,303.64 C 155.56,187.26999999999998 306.66999999999996,303.64 382.22,187.26999999999998" style="opacity: 1; stroke: rgb(207, 114, 255); stroke-opacity: 1; fill: rgb(0, 0, 0); fill-opacity: 0; stroke-width: 2px;" clip-path="url(#clipb71614xy)"></path>
<path data-index="1" fill-rule="evenodd" d="M 117.78 390.91 L 117.78 332.73 L 231.11 390.91 Z" style="opacity: 1; stroke: rgb(44, 160, 101); stroke-opacity: 1; fill: rgb(44, 160, 101); fill-opacity: 0.5; stroke-width: 2px;" clip-path="url(#clipb71614xy)">
</path>
</g>
</g>
<!-- title -->
<g class="infolayer"><g class="g-gtitle"><text class="gtitle" style="font-family: "Open Sans", verdana, arial, sans-serif; font-size: 17px; fill: rgb(68, 68, 68); opacity: 1; font-weight: normal; white-space: pre;" x="250" y="50" text-anchor="middle" data-unformatted="Basic Arbitrary SVG Paths" data-math="N">Basic Arbitrary SVG Paths</text></g><g class="g-xtitle"></g>
<g class="g-ytitle"></g>
</g>
</svg>
</div>
</div>
</div>
</body>
</html>
填充三角形
三次贝塞尔曲线
02468
0246810
基本任意SVG路径