Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Як підігнати svg під таблицю ?
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
Щоб не комірку розтягувало, а стискало svg під розмір комірки, по висоті.
покажіть приклад коду, чи шо
покажіть приклад коду, чи шо
var table = document.createElement('table');
table.style.width = '100%';
table.style.height = 'inherit';
table.border = "1";
var tr1 = document.createElement('tr');
var th;
var svg;
var mark;
var coloredText;
for (var i = 0; i < this.leftY.length; i++) {
th = document.createElement('th');
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
/*svg.style.width = 'auto';
svg.style.height = 'inherit';*/
//svg.setAttributeNS(null, "preserveAspectRatio", "none");
svg.setAttributeNS(null, "display", "block");
/*svg.setAttributeNS(null, "height", "100%");
svg.setAttributeNS(null, "width", "100%");*/
svg.setAttributeNS(null, "viewBox", "0 0 100 100");
mark = document.createElementNS("http://www.w3.org/2000/svg", "circle");
mark.setAttributeNS(null, "cx", 50);
mark.setAttributeNS(null, "cy", 50);
mark.setAttributeNS(null, "r", 50);
mark.setAttributeNS(null, "fill", this.leftY[i].color);
mark.setAttributeNS(null, "stroke", "none");
svg.appendChild(mark);
th.appendChild(svg);
coloredText = document.createElement('span');
coloredText.textContent = this.leftY[i].legend.toString();
coloredText.style.color = this.leftY[i].color;
th.appendChild(coloredText);
tr1.appendChild(th);
}
/*for (var i = 0; i < this.rightY.length; i++) {
th = document.createElement('th');
coloredText = document.createElement('span');
coloredText.textContent = this.rightY[i].legend.toString();
coloredText.style.color = this.rightY[i].color;
th.appendChild(coloredText);
tr1.appendChild(th);
}*/
table.appendChild(tr1);
document.getElementById(this.legendDiv).appendChild(table);наприклад, так
https://jsfiddle.net/64rmkeu8/
<table>
<tr>
<td>hi there</td>
<td>my friends</td>
<td>how are you</td>
</tr>
<tr>
<td>hi there</td>
<td id="td"><img src="https://media.inkscape.org/media/resources/file/DIGIDOWN034-welded-svg.svg"></td>
<td>how are you</td>
</tr>
<tr>
<td>hi there</td>
<td>my friends</td>
<td>how are you</td>
</tr>
</table>td {
border: 1px solid grey;
}
#td {
position: relative;
width: 50px;
height: 50px;
}
#td img {
width: 100%;
height: 100%;
}img - а в нього взагалі теоретично можливо запхати динамічно сгенерований svg, через DOM ? object не підійде як контейнер?
в src img мона запхати data uri, але якшо ви динамічно створюєте svg, то його самого можна запхати в td, ось приклад, майже все так само
https://jsfiddle.net/bdjqmsaf/
Чому
svg.setAttributeNS(null, "height", "inherit");розтягує svg на весь viewBox, замість того щоб взяти висоту від батьківської комірки ?
мо тому що батьківська комірка не має вказаної висоти?
Атрибути style і class для того є.
<svg style="width: auto; height: 100%;" width="400" height="110">Атрибути style і class для того є.
<svg style="width: auto; height: 100%;" width="400" height="110">
та ні розтягує, все одно на габарити viewBox
leofun01 написав:Атрибути style і class для того є.
<svg style="width: auto; height: 100%;" width="400" height="110">та ні розтягує, все одно на габарити viewBox
киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю
cheappi386 написав:leofun01 написав:Атрибути style і class для того є.
<svg style="width: auto; height: 100%;" width="400" height="110">та ні розтягує, все одно на габарити viewBox
киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю
воно там не працює
FakiNyan написав:cheappi386 написав:та ні розтягує, все одно на габарити viewBox
киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю
воно там не працює
ок
leofun01 написав:Атрибути style і class для того є.
<svg style="width: auto; height: 100%;" width="400" height="110">та ні розтягує, все одно на габарити viewBox
height: 100%; - це я навів приклад використання.
Ви навіть не пробували встановити ті значення, які вам треба.
Тут приклад з height: 1em;. Все працює.
1em
щось з голови вилетіло, що і така одиниця розміру є
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися