:: jQuery :: 将元素附加为区分大小写和非标准的 html 元素

Question

我有不同的自定义形状，当我单击按钮时，应将一张图像附加到其具有相同形状的父 SVG 文件（在 svg 形状内屏蔽图像）。

除了以下故障之外，一切都按预期工作

• 尝试将我的 svg 路径包裹在 <clipPath> 中，但得到 <clippath>
• 试图添加<image>标签，但它会自动转换为<img>标签。

如何将元素附加为区分大小写和精确的元素。

jsFiddle

HTML

<svg id="cusotmShape" version="1.1" style="width:100px;height:100px;" stroke="off" set-as-background="no" class="custom-shape cs-shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 135.8 130.8" xml:space="preserve">
    <path rp-cp-id="rp-shape-02" class="cs-element-layer" fill="#000000" style="stroke:transparent;stroke-width:0px;" d="M100.4,128.4l-26.8-13.5c-2.9-1.5-6.4-1.4-9.3,0.2l-26.2,14.4c-7.3,4-15.9-2.1-14.7-10.3l4.5-29.6 c0.5-3.2-0.6-6.5-3-8.8L3.1,60.3c-6-5.7-2.9-15.8,5.2-17.1l29.6-4.8c3.2-0.5,6-2.6,7.4-5.6L58.1,5.7C61.6-1.8,72.2-2,76,5.4L89.7,32 c1.5,2.9,4.4,4.9,7.6,5.3l29.7,3.8c8.2,1,11.7,11,5.8,16.9l-20.9,21.3c-2.3,2.3-3.3,5.7-2.7,8.9l5.6,29.5 C116.3,125.7,107.8,132.1,100.4,128.4z"></path>
</svg>

<div><button type="button" id="insertImage">Insert Image</button></div>

脚本

jQuery(document).on('click', '#insertImage', function (e) {
var _custom_shape_svg = jQuery('svg#cusotmShape');
var _custom_shape_svg_id = jQuery('svg#cusotmShape path').attr('rp-cp-id')
  _custom_shape_svg.wrapInner('<clipPath id="' + _custom_shape_svg_id +'"></clipPath>');
  _custom_shape_svg.append('<image clip-path="url(#' + _custom_shape_svg_id +')" xlink:href="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg"  src="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" alt="Image" height="100" width="100" class="svg__image" />');
});

我得到了什么：

<svg id="cusotmShape" version="1.1" style="width:100px;height:100px;" stroke="off" set-as-background="no" class="custom-shape cs-shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 135.8 130.8" xml:space="preserve">
    <clippath id="rp-shape-02">
        <path rp-cp-id="rp-shape-02" class="cs-element-layer" fill="#000000" style="stroke:transparent;stroke-width:0px;" d="M100.4,128.4l-26.8-13.5c-2.9-1.5-6.4-1.4-9.3,0.2l-26.2,14.4c-7.3,4-15.9-2.1-14.7-10.3l4.5-29.6 c0.5-3.2-0.6-6.5-3-8.8L3.1,60.3c-6-5.7-2.9-15.8,5.2-17.1l29.6-4.8c3.2-0.5,6-2.6,7.4-5.6L58.1,5.7C61.6-1.8,72.2-2,76,5.4L89.7,32 c1.5,2.9,4.4,4.9,7.6,5.3l29.7,3.8c8.2,1,11.7,11,5.8,16.9l-20.9,21.3c-2.3,2.3-3.3,5.7-2.7,8.9l5.6,29.5 C116.3,125.7,107.8,132.1,100.4,128.4z"></path>
    </clippath>
    <img clip-path="url(#rp-shape-02)" xlink:href="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" src="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" alt="Image" height="100" width="100" class="svg__image">
</svg>

预期

<svg id="cusotmShape" version="1.1" style="width:100px;height:100px;" stroke="off" set-as-background="no" class="custom-shape cs-shape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 135.8 130.8" xml:space="preserve">
    <clipPath id="rp-shape-02">
        <path rp-cp-id="rp-shape-02" class="cs-element-layer" fill="#000000" style="stroke:transparent;stroke-width:0px;" d="M100.4,128.4l-26.8-13.5c-2.9-1.5-6.4-1.4-9.3,0.2l-26.2,14.4c-7.3,4-15.9-2.1-14.7-10.3l4.5-29.6 c0.5-3.2-0.6-6.5-3-8.8L3.1,60.3c-6-5.7-2.9-15.8,5.2-17.1l29.6-4.8c3.2-0.5,6-2.6,7.4-5.6L58.1,5.7C61.6-1.8,72.2-2,76,5.4L89.7,32 c1.5,2.9,4.4,4.9,7.6,5.3l29.7,3.8c8.2,1,11.7,11,5.8,16.9l-20.9,21.3c-2.3,2.3-3.3,5.7-2.7,8.9l5.6,29.5 C116.3,125.7,107.8,132.1,100.4,128.4z"></path>
    </clipPath>
    <image clip-path="url(#rp-shape-02)" xlink:href="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" src="https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg" alt="Image" height="100" width="100" class="svg__image">
</svg>

Answer 1

当您将标记字符串传递给$ 时，它会使用浏览器在<div> 上的innerHTML 属性解析为HTML（或其他适合特殊情况的容器，例如<tr>）。 innerHTML 无法解析 SVG 或其他非 HTML 内容。

innerHTML 在 SVGElement 上不可用——它只是 HTMLElement 的属性。 jQuery 无法让您轻松访问创建 SVG 元素所需的命名空间方法。真的 jQuery 根本不是为与 SVG 一起使用而设计的，许多操作可能会失败。

所以也许这会导致你的问题：<clipPath> 到 <clippath> 和 <image> 到 <img>

要能够创建svg 标签，请使用document.createElementNS(namespaceURI, qualifiedName[, options])

例如：

const namespaceURI = 'http://www.w3.org/2000/svg'
const clipPath = document.createElementNS(namespaceURI, 'clipPath')
clipPath.id = 'clippy';
    
const image = document.createElementNS(namespaceURI, 'image')
image.id = 'image-id'

最后，你可以尝试这样解决问题：

const _svgNS = 'http://www.w3.org/2000/svg';
const customShape = document.getElementById('customShape');

const svg = customShape.appendChild(document.createElementNS(_svgNS, 'image'));
svg.setAttribute('x', '0');
svg.setAttribute('y', '0');
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');
svg.setAttribute('clip-path', 'url(#clippy)');
svg.setAttributeNS('http://www.w3.org/1999/xlink','href','https://www.vzhurudolu.cz/assets/codepen/kubik_ig.jpg');

// create clipPath
const clipPath = customShape.appendChild(document.createElementNS(_svgNS, 'clipPath'));
clipPath.id = 'clippy';

$('#insertImage').click(function () {
    const path = clipPath.appendChild(document.createElementNS(_svgNS, 'path'));
    path.setAttribute('d', 'M100.4,128.4l-26.8-13.5c-2.9-1.5-6.4-1.4-9.3,0.2l-26.2,14.4c-7.3,4-15.9-2.1-14.7-10.3l4.5-29.6 c0.5-3.2-0.6-6.5-3-8.8L3.1,60.3c-6-5.7-2.9-15.8,5.2-17.1l29.6-4.8c3.2-0.5,6-2.6,7.4-5.6L58.1,5.7C61.6-1.8,72.2-2,76,5.4L89.7,32 c1.5,2.9,4.4,4.9,7.6,5.3l29.7,3.8c8.2,1,11.7,11,5.8,16.9l-20.9,21.3c-2.3,2.3-3.3,5.7-2.7,8.9l5.6,29.5 C116.3,125.7,107.8,132.1,100.4,128.4z');
})

body {
    padding: 50px;
}

button {
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #dedede;
    background: #000080;
    color: #ffffff;
    font-size: 16px;
}

svg#customShape {
    width:100px;
    height:100px;
}

svg#customShape > path {
    stroke:transparent;
    stroke-width:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" id="customShape" stroke="off"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" viewBox="0 0 135.8 130.8" xml:space="preserve">

     <path class="cs-element-layer" fill="#000000"
      d="M100.4,128.4l-26.8-13.5c-2.9-1.5-6.4-1.4-9.3,0.2l-26.2,14.4c-7.3,4-15.9-2.1-14.7-10.3l4.5-29.6 c0.5-3.2-0.6-6.5-3-8.8L3.1,60.3c-6-5.7-2.9-15.8,5.2-17.1l29.6-4.8c3.2-0.5,6-2.6,7.4-5.6L58.1,5.7C61.6-1.8,72.2-2,76,5.4L89.7,32 c1.5,2.9,4.4,4.9,7.6,5.3l29.7,3.8c8.2,1,11.7,11,5.8,16.9l-20.9,21.3c-2.3,2.3-3.3,5.7-2.7,8.9l5.6,29.5 C116.3,125.7,107.8,132.1,100.4,128.4z">

     </path>
</svg>

<div>
    <button type="button" id="insertImage">Insert Image</button>
</div>