如果使用Javascript创建，则clippath不起作用，但如果它来自HTML标签，则工作正常

我在 SVG 剪辑中遇到了问题。我有一个图表需要从javascript动态绘制，值来自JSON。现在在其中一个配置中，如果曲线超出范围，我必须裁剪曲线，否则我必须更改 x 轴和 y 轴的值范围以适合图形窗口中的曲线。 在实现剪切功能之前，我做了一些POC，并尝试了传统的HTML标签，并且它工作正常。波纹管是 POC 的代码：

<svg>
   <defs>
    <clippath id="Clippath1">
        <rect id="Rect1" x="0" y="0" width="940.5" height="300">
        </rect>
    </clippath>
    <marker id="Marker1" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="10" markerheight="10" orient="auto">
        <circle cx="5" cy="5" r="1" stroke="red" stroke-width="1" fill="black">
        </circle>
    </marker>
</defs>
<g>
    <polyline points="0,0 140,125 160,140 180,220 220,240 300,280 400,450 500,500 900,900"
        style="fill: none; stroke: red; stroke-width: 5" clip-path="url(#clip)" stroke="blue"
        stroke-width="1" marker-start="url(#point)" marker-mid="url(#point)" marker-      end="url(#point)" />
    </g>
</svg>

它工作正常。我有一个标记来显示点，并且在标签内有一个标记，并且我已经将剪辑路径应用于我的折线。

现在在我的项目中，我需要从javascript(创建所有标签(从javascript执行相同的操作。 和它不起作用。

    parentSVGGroup = _currTrendWin.getSVG();
    //Create a defs tag
    defs = PWC.HmiAC.svgPolyline.CreateSvgElement('defs', { 'id': 'drawableTrendArea_defs', 'appendTo': parentSVGGroup });
    //creating the  clippath
    clipPath = PWC.HmiAC.svgPolyline.CreateSvgElement('clippath', { 'id': 'drawableTrendArea_clippath', 'appendTo': defs });
    //creating the rectangle for the defining the drawable rectangle
    clipRect = PWC.HmiAC.svgPolyline.CreateSvgElement('rect',
                                                      { 'id': 'drawableTrendAreaRect',
                                                          'x': _currTrendWin.getRect().left,
                                                          'y': _currTrendWin.getRect().top,
                                                          'width': _currTrendWin.getRect().width,
                                                          'height': _currTrendWin.getRect().height,
                                                          'appendTo': clipPath
                                                      });
    markerConfig =
    {
        'id': 'point',
        'viewBox': '0 0 10 10',
        'refX': 5,
        'refY': 5,
        'markerWidth': 10,
        'markerHeight': 10,
        'orient': 'auto',
        'appendTo': defs
    };
    marker = PWC.HmiAC.svgPolyline.CreateSvgElement('marker', markerConfig);
    PointStyleConfig =
    {
        'cx': 5,
        'cy': 5,
        'r': 1,
        'stroke': 'red',
        'stroke-width': 1,
        'fill': 'black',
        'appendTo': marker
    };
    pointStyle = PWC.HmiAC.svgPolyline.CreateSvgElement('circle', PointStyleConfig);

    polyLine = {
        'points': points.trim(),
        'id': _name,
        'fill': 'none',
        'stroke': 'blue',
        'stroke-width': 1,
        'marker-start': 'url(#point)',
        'marker-mid': 'url(#point)',
        'marker-end': 'url(#point)',
        'clip-path': 'url(#drawableTrendArea_clippath)',
        'appendTo': parentSVGGroup
    };
    poly = document.getElementById(_name);
    if (poly) {
        poly.parentNode.removeChild(poly);
    }
    poly = PWC.HmiAC.svgPolyline.CreateSvgElement('polyline', polyLine);  

这是从javascript创建相同逻辑的代码内容。但是，如果我从浏览器中复制生成的 html 文件并将整个 html 标签放入一个新文件中，它将按预期工作。

对不起，我忘了添加该功能。.它的波纹管：

  _createSvgElement = function (type, attributes) {
  var svgElement = document.createElementNS(_svgNS, type),
  attr, value;
  if (attributes) {
        for (attr in attributes) {
            if (attr) {
                value = attributes[attr];
                if (attr === 'appendTo') {
                    value.appendChild(svgElement);
                }
                else {
                    svgElement.setAttributeNS(null, attr, value);
                }
            }
        }
     }
    return svgElement;
  };

你能不能帮我解决问题。.

谢谢阿里吉特