1

Тема: Як підігнати svg під таблицю ?

Щоб не комірку розтягувало, а стискало svg під розмір комірки, по висоті.

2

Re: Як підігнати svg під таблицю ?

покажіть приклад коду, чи шо

3

Re: Як підігнати svg під таблицю ?

FakiNyan написав:

покажіть приклад коду, чи шо

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);

4

Re: Як підігнати svg під таблицю ?

наприклад, так
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%;
}

5 Востаннє редагувалося cheappi386 (30.03.2021 10:03:27)

Re: Як підігнати svg під таблицю ?

img - а в нього взагалі теоретично можливо запхати динамічно сгенерований svg, через DOM ? object не підійде як контейнер?

6

Re: Як підігнати svg під таблицю ?

в src img мона запхати data uri, але якшо ви динамічно створюєте svg, то його самого можна запхати в td, ось приклад, майже все так само
https://jsfiddle.net/bdjqmsaf/

Подякували: leofun011

7

Re: Як підігнати svg під таблицю ?

Чому

svg.setAttributeNS(null, "height", "inherit");

розтягує svg на весь viewBox, замість того щоб взяти висоту від батьківської комірки ?

8

Re: Як підігнати svg під таблицю ?

мо тому що батьківська комірка не має вказаної висоти?

9

Re: Як підігнати svg під таблицю ?

Атрибути style і class для того є.

<svg style="width: auto; height: 100%;" width="400" height="110">

10 Востаннє редагувалося cheappi386 (31.03.2021 08:03:25)

Re: Як підігнати svg під таблицю ?

leofun01 написав:

Атрибути style і class для того є.

<svg style="width: auto; height: 100%;" width="400" height="110">

та ні розтягує, все одно на габарити viewBox

11

Re: Як підігнати svg під таблицю ?

cheappi386 написав:
leofun01 написав:

Атрибути style і class для того є.

<svg style="width: auto; height: 100%;" width="400" height="110">

та ні розтягує, все одно на габарити viewBox

киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю

12

Re: Як підігнати svg під таблицю ?

FakiNyan написав:
cheappi386 написав:
leofun01 написав:

Атрибути style і class для того є.

<svg style="width: auto; height: 100%;" width="400" height="110">

та ні розтягує, все одно на габарити viewBox

киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю

воно там не працює

13

Re: Як підігнати svg під таблицю ?

cheappi386 написав:
FakiNyan написав:
cheappi386 написав:

та ні розтягує, все одно на габарити viewBox

киньте посилання на https://jsfiddle.net/ з вашим кодом, шоб ми могли то протестувати і глянути, як воно все виглядає повністю

воно там не працює

ок

14

Re: Як підігнати svg під таблицю ?

cheappi386 написав:
leofun01 написав:

Атрибути style і class для того є.

<svg style="width: auto; height: 100%;" width="400" height="110">

та ні розтягує, все одно на габарити viewBox

height: 100%; - це я навів приклад використання.
Ви навіть не пробували встановити ті значення, які вам треба.

Тут приклад з height: 1em;. Все працює.

Подякували: cheappi3861

15 Востаннє редагувалося cheappi386 (01.04.2021 09:12:32)

Re: Як підігнати svg під таблицю ?

leofun01 написав:

1em

щось з голови вилетіло, що і така одиниця розміру є