Question

我在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>

工作正常。我有一个标记来显示该点，并在标记内有一个标记，我已将clippath应用于我的折线。

现在在我的项目中，我需要从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;
  };

你可以帮助我摆脱这个问题。

由于 Arijit

Answer 1

这场比赛已经很晚了。我遇到了同样的问题，问题似乎来自于javascript / jquery都将elementname转换为全部小写，而clippath实际上需要是clipPath。

我目前正在努力为此寻找解决办法，或者如果你愿意，请分享。

我能够让它工作的PITA方法是创建一个HTML字符串，然后使用jquery将clipPaths附加到我的defs部分。

不干净，不是我想做的方式，但它完成了。

如果使用Javascript创建Clippath不工作，但如果它来自HTML标记则完美地工作

1 个答案: