tôi là tạo ra một cấu trúc dom trong đó bao gồm một yếu tố SVG:SVG Sẽ không hiển thị cho đến khi tôi chỉnh sửa các yếu tố trong các công cụ nhà phát triển Chrome
<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>
Yếu tố svg không thực sự hiển thị. Khi tôi tìm thấy phần tử svg trong các công cụ dành cho nhà phát triển Chrome, cả chiều rộng và chiều cao đều hiển thị bằng 0.
Tôi đã thử xóa thuộc tính kiểu. Tôi đã thử thiết lập chiều rộng và chiều cao trong thuộc tính style.
tôi đã sao chép svg vào một tập tin HTML riêng biệt:
<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>
đâu nó sẽ hiển thị tốt.
Nếu tôi bọc phần tử svg vào div, phần tử svg sẽ xuất hiện. Thực tế, nếu tôi chỉnh sửa HTML trong các công cụ dành cho nhà phát triển Chrome thì nó sẽ hiển thị.
Vì vậy, vâng, tại sao? Tôi đã thực hiện một tìm kiếm trên Google cho điều này, nhưng hoặc là nó không có hoặc (nhiều khả năng) Google Fu của tôi không phải là nhiệm vụ. Tôi có nghĩa là, chắc chắn, tôi có thể bọc nó trong một div - và có lẽ đó là điều đúng để làm - nhưng tôi không muốn vì sau đó tôi cần phải bọc những thứ khác trong divs và dom sẽ bắt đầu để có được lộn xộn.
EDIT: Trên linh cảm, tôi đã thử chỉnh sửa thuộc tính chế độ xem thành phần tử SVG trong công cụ Chrome. Thì đấy! Các yếu tố có thể nhìn thấy! Mong đợi khi tôi bao gồm thuộc tính khung nhìn khi tạo tài liệu, nó không hiển thị. Vì vậy, tôi đã thử chỉ thêm thuộc tính ngẫu nhiên trong công cụ Chrome vào phần tử SVG. Thì đấy! Element có thể nhìn thấy! Vì vậy, tôi nghĩ, sự cố dành riêng cho Chrome và đã thử chạy nó trong Firefox ...
... nơi phần tử không hiển thị.
CHỈNH SỬA: Tuyệt vời, do đó, bao gói trong div không được đảm bảo để hiển thị. Nhưng thực hiện "chỉnh sửa dưới dạng HTML" trong các công cụ dành cho nhà phát triển Chrome sẽ làm cho công cụ này hiển thị.
EDIT: Vâng, tôi đã làm cho nó hoạt động chính xác và, có, nó hóa ra là một hàm của Javascript tạo các phần tử DOM. Có rất nhiều thứ trong các mã, nhưng tôi có thể đun sôi nó xuống này:
Mã này hoạt động (createElement tạo ra một thẻ và thiết lập thuộc tính dựa trên thông qua các thông số):
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;
Mã này doesn 't:
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;
Vì vậy, chắc chắn, tôi đã có một số việc đang hoạt động, nhưng tôi không hiểu tại sao. Hoặc nhiều hơn vào vấn đề này, tôi không hiểu tại sao một cách làm việc và cái kia thì không. Tôi có một vài dự đoán, nhưng chúng chỉ là những dự đoán hoang dã.
đã bạn đã cố gắng làm việc rộng thuộc tính Viewbox? Ví dụ.
Bạn cần phải thêm mã mà bạn đã viết để tạo các phần tử DOM, nếu không bạn sẽ yêu cầu chúng tôi ghi nhớ vấn đề là gì và chúng tôi không quá giỏi cái đó. –
Thực ra tôi đã thử sử dụng thuộc tính viewBox. Không có sự khác biệt. Tôi đoán tốt nhất vào thời điểm này đã làm với khi các yếu tố thực sự được trả lại. – aikimcr