【在线等】jquery通过append添加的svg标签无法显示

Posted 2023-03-24

jquery通过append添加的svg标签无法显示出来，但是在firebug里是可以看到的，只不过字是虚的。用is(:hidden)查看了下得出的结果是true。用show()方法也显示不了。哪位大神告诉我怎么办。
添加<svg>标签是不隐藏的。但是往svg标签里添加东西就是隐藏的了

首先，jquery是操作普通xhtml的，对应svg这种特殊的标签，或者说xml，浏览器如何区分，当然是通过命名空间：namespaceURI,比如普通html的是http://www.w3.org/1999/xhtml，而svg也有自己的命名空间:http://www.w3.org/2000/svg，jquery在操作的时候没有加以区分，因此导致了这样的错误。怎么办，使用setAttributeNS创建svg标签即可。

其次，我们创建大量标签的时候，喜欢innerHTML=template这种方式，svg也可以，应该说大部分浏览器都可以，可是有些浏览器不可以，我们就需要自己提供兼容的innerSVG方法了。

最后，关于上面说的二点，你都可以对比这个例子。

参考技术A svg是xml文档，html的xhtml文档，两种格式从理论上来讲是不一样的，所以直接用js操作html的语法应用到svg，是不起作用的。即使使用appendChild等语法也不会显示出来。
可以使用innerHTML的做法，将svg字符串拼到你的容器上。 参考技术B 你调用show（）的dom对象是不是选择错了。你先通过控制台看一下，调用show的dom对象是否正确。要不就是你写的东西太乱了，有覆盖和兼容问题，你最好理一下自己的代码。不行你就去试着改css样式。追问

我页面上什么都没有。只有整个body只有一个svg，我静态添加的标签都没问题，动态添加的都显示不出来。css默认不是都是显示的么。

追答

下个火狐浏览器，按F12慢慢排查吧，没遇到过这种情况

追问

我上面都说了用firebug再查了。。。。。。。。。。

参考技术C 同问，请问最后怎么解决的？

jQuery click（）和append（）在迭代的div上没有响应

我正在迭代这个div和脚本，以便用户可以添加三个默认选项（question-editor-answer-container）的答案。但点击“添加答案”不起作用，我不明白为什么。

我有一个单独的工作，但麻烦开始时，我不得不调整在同一页面上有很多div。其他容器（popup.question-editor）有不同的id，如13,14,15等。这些是通过PHP放置的，这可能不相关。

var container = $(".popup.question-editor#12");
container.find(".add-answer").click(function() {
  var order = null;
  order = container.find('.question-editor-answers div:last-child .correct').attr('value');
  order = parseInt(order) + 1;
  container.find('.question-editor-answers').append($('<div class="question-editor-answer-container"><span class="question-answer"><input type=text name="answers[]" /></span><span class="question-correct"><input type="radio" class="correct" value="' + order + '"name="correct"  /></span></div>'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup question-editor" id="12">
  <span class="close" id="close">X</span>
  <form method="post" lpformnum="4">
    <p>
      <label>Question</label>
      <textarea name="question" class="question-input"></textarea>
    </p>
    <p>
      <label>Answers</label>
    </p>
    <div class="question-editor-answers">
      <div class="question-editor-answer-container">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="0">
					</span>
      </div>
      <div class="question-editor-answer-container">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="1">
					</span>
      </div>
      <div class="question-editor-answer-container" id="found">
        <span class="question-answer">
						<input type="text" name="answers[]">
					</span>
        <span class="question-correct">
						<input type="radio" class="correct" name="correct" value="2">
					</span>
      </div>
      <div>Something</div>
    </div>
    <div class="add-answer" id="add-answer"><span>add</span></div>
    <p></p>
    <p>
      <input type="checkbox" name="reuse" value="1">Allow reuse (what does this mean?)
    </p>
    <p>
      <input type="hidden" name="add_question" value="add">
      <input type="hidden" name="category" value="1">
      <input type="submit" value="Add">
    </p>
  </form>
</div>

答案

不要使用以数字字符开头的id：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高，加上连字符（ - ）和下划线（ _）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符“B＆W？”可以写成“B ＆W ？”或“B 26 W 3F”。

W3C Recommandation