0

我在 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 执行相同的操作（创建所有标签）。它不工作。

    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;
  };

你能帮我解决这个问题吗？

谢谢阿里吉特

4

1 回答 1

0

比赛已经很晚了。我有同样的问题，问题似乎来自这样一个事实，即 javascript/jquery 都将元素名转换为全部小写，而剪辑路径实际上需要是剪辑路径。

我目前正在尝试解决此问题，或者如果您这样做了，请分享。

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

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

于 2014-03-09T03:07:59.590 回答