个人中心
gpt4 book ai didi

在我在 Chrome 开发人员工具中编辑元素之前，SVG 不会显示

转载 作者：行者123 更新时间：2023-12-04 03:04:06 25 4
gpt4 key购买 nike

我正在创建一个包含 SVG 元素的 dom 结构:

<div data-bind="with: searchable_select.f0000001" style="verticalAlign: top">
  <input data-bind="value: select_filter_value, valueUpdate: 'afterkeydown', event: { change: change_filter_, blur: blur_filter_ }" style="display: none">
  <div>
    <select data-bind="options: select_list, value: working_value, event: { change: change_selector_ }, optionsText: 'label', optionsValue: 'value'" style="display: inline-block; maxWidth: 150px">
      <option value="person_full_name_asc">Member Full Name (A-Z)</option>
      <option value="person_full_name_desc">Member Full Name (Z-A)</option>
    </select>
    <svg style="display: inline-block; verticalAlign: middle" width="18" height="18" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <g>
        <circle cx="6" cy="6" r="5" fill="#AAAAAA" stroke="#000000" stroke-width="2"></circle>    
        <path fill="#AAAAAA" stroke="#000000" stroke-width="2" d="M10,10 L17,17"></path>
      </g>
    </svg>
  </div>
</div>

svg 元素实际上并未显示。当我在 Chrome 开发者工具中找到 svg 元素时，宽度和高度都显示为零。

我试过删除样式属性。我尝试在样式属性中设置宽度和高度。

我已将 svg 复制到单独的 HTML 文件中: 
<html>
<head><title>maggen</title></head>
<body>
  <svg style="display: inline-block; verticalAlign: middle" width="18" height="18" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
      <circle cx="6" cy="6" r="5" fill="#AAAAAA" stroke="#000000" stroke-width="2"></circle>
      <path fill="#AAAAAA" stroke="#000000" stroke-width="2" d="M10,10 L17,17"></path>
    </g>
  </svg>
</body>
</html>

它显示良好的地方。

如果我将 svg 元素包装在 div 中，则会显示 svg 元素。事实上，如果我在 Chrome 开发人员工具中编辑 HTML，它就会显示出来。

所以，是的，为什么？我已经在 Google 上进行了搜索，但要么不存在，要么(更有可能)我的 Google Fu 无法胜任这项任务。我的意思是，当然，我可以将它包装在一个 div 中 - 也许这是正确的做法 - 但我宁愿不这样做，因为那样我需要将其他东西包装在 div 中，并且 dom 将开始变得困惑。

编辑:凭直觉，我尝试将视口(viewport)属性编辑到 Chrome 工具中的 SVG 元素中。瞧!元素可见!预计当我在创建文档时包含视口(viewport)属性时，它是不可见的。所以我尝试在 Chrome 工具中向 SVG 元素添加一个随机属性。瞧!元素可见!所以，我想，这个问题是 Chrome 特有的，并尝试在 Firefox 中运行它......

...元素没有出现的地方。

编辑:太好了，因此不能保证将其包装在 div 中使其显示出来。但是在 Chrome 开发人员工具中进行“编辑为 HTML”确实会显示出来。

编辑:好吧，我已经让它正常工作了，是的，它原来是创建 DOM 元素的 Javascript 的一个函数。代码中有很多东西，但我可以归结为:

此代码有效(createElement 创建一个标签并根据传入的参数设置属性): 
var div = this.createElement(
  'div',
  element_name + '_div',
  null, style_options, null, null
);

div.innerHTML = [
  '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width=' + width + ' height=' + height + '>',
  svg_xml.join(''),
  '</svg>'
].join('');

if (parent) parent.appendChild(div);
return div;

此代码不会: 
var svg = this.createElement('svg', element_name, null, style_options, classlist, {
  viewport: '0 0 ' + width + ' ' + height,
  version: "1.1",
  xmlns: "http://www.w3.org/2000/svg",
  width: width,
  height: height
});

svg.innerHTML = svg_xml.join('');

if (parent) parent.appendChild(svg);
return svg;

所以，当然，我现在有一些工作，但我不明白为什么。或者更重要的是，我不明白为什么一种方法有效而另一种方法无效。我有几个猜测，但它们只是疯狂的猜测，真的。

最佳答案

"I've got something working now, but I don't understand why."



问题是您使用的方法没有在 SVG 命名空间中创建 SVG 元素。 xmlns属性只影响 XML 解析器的行为，而不影响 DOM 方法。

我不确定您为 this.createElement() 使用哪个库具有多个参数的方法。但是，我怀疑它可能从调用基本的 document.createElement(tagName) 开始。方法。这就是 MDN says about the standard DOM createElement method :

In an HTML document creates the specified HTML element or HTMLUnknownElement if the element is not known. ... In other documents creates an element with a null namespaceURI.



换句话说，因为您(可能是间接地)调用 createElement在 HTML 文档上，它总是创建一个 HTML 元素。标签名称为“svg”的 HTML 元素仅被视为未知的跨度类型元素。

相比之下，使用 div.innerHTML传递标记字符串会正确创建 SVG 元素，因为它调用 HTML5 解析器来确定要创建的元素类型。命名空间的确定使用与从文件中解析标记时相同的规则。在 Chrome 开发人员工具中编辑 HTML 具有相同的效果。

旁注:避免调用 .innerHTML在 SVG 元素上。一些浏览器支持它，但它不是规范的一部分。您没有收到错误，因为您的 svg变量实际上是 HTMLUnknownElement 的一个实例.将 SVG 代码传递给 innerHTML parent 的方法 <div>通常有效，尽管 SMIL 动画存在一些错误。正如@Robert Longson 在评论中所说，您可以使用 DOMParser object将 HTML 或 XML 代码解析为文档。

动态创建 SVG 元素的另一种方法是使用 document.createElementNS(namespaceURI, tagName) .您还必须使用此方法来创建 SVG 的所有子元素。创建它们后，您可以使用库方法设置属性、样式和类。 (但你还没有指定你正在使用什么库，所以我不确定。)

关于在我在 Chrome 开发人员工具中编辑元素之前，SVG 不会显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24961151/

25 4 0
文章推荐： Codeigniter 和 $_SERVER
文章推荐： linker - fatal error C1900 : Il mismatch between 'P1' version '20060201' and 'P2' version '20050411'
文章推荐： asp-classic - 上传照片 - 我怎样才能保持我们网站的安全/稳定
文章推荐： r - 匹配字符串，但前提是不带其他字符串
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com