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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com