search

dompdf / php-svg-lib

SVG file parsing / rendering library
GNU Lesser General Public License v3.0
1.41k stars 77 forks source link

g group not working #107

Open wsimm opened 1 year ago

wsimm commented 1 year ago

hi, I combined some elements inside groups but once I use dmpdf they are all recursively extracted

any way to fix it?

bsweeney commented 1 year ago

Do you have a sample to show what you mean?

wsimm commented 1 year ago

hi, @bsweeney

in this example, i have many groups, when i convert this file to pdf , all groups extracted

<svg id="grid" width="1000.00" height="500.00" viewBox="0 0 1000.00 500.00"
    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
    <g class="backgroundGroup">
        <rect stroke="none" fontFamily="sans-serif" class="gide-text" x="0" y="0" width="1000.00" height="500.00" fill="#ffffff"/>
    </g>
    <g class="gridSystemGroup">
        <defs>
            <style>rect{color:yellow;}</style>
        </defs>
    </g>
    <g class="rowsGroup">
        <line x1="0" y1="100" x2="1000" y2="100" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="144" x2="1000" y2="144" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="164" x2="1000" y2="164" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="208" x2="1000" y2="208" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="228" x2="1000" y2="228" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="272" x2="1000" y2="272" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="292" x2="1000" y2="292" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="336" x2="1000" y2="336" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="356" x2="1000" y2="356" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="400" x2="1000" y2="400" stroke="red" stroke-width="0.5"/>
    </g>
    <g class="columnGroup">
        <line x1="100" y1="0" x2="100" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="128.23529411764707" y1="0" x2="128.23529411764707" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="148.23529411764707" y1="0" x2="148.23529411764707" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="176.47058823529414" y1="0" x2="176.47058823529414" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="196.47058823529412" y1="0" x2="196.47058823529412" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="224.70588235294116" y1="0" x2="224.70588235294116" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="244.70588235294116" y1="0" x2="244.70588235294116" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="272.94117647058823" y1="0" x2="272.94117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="292.94117647058823" y1="0" x2="292.94117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="321.1764705882353" y1="0" x2="321.1764705882353" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="341.1764705882353" y1="0" x2="341.1764705882353" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="369.4117647058824" y1="0" x2="369.4117647058824" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="389.4117647058823" y1="0" x2="389.4117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="417.6470588235294" y1="0" x2="417.6470588235294" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="437.6470588235294" y1="0" x2="437.6470588235294" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="465.88235294117646" y1="0" x2="465.88235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="485.88235294117646" y1="0" x2="485.88235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="514.1176470588235" y1="0" x2="514.1176470588235" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="534.1176470588235" y1="0" x2="534.1176470588235" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="562.3529411764706" y1="0" x2="562.3529411764706" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="582.3529411764706" y1="0" x2="582.3529411764706" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="610.5882352941177" y1="0" x2="610.5882352941177" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="630.5882352941177" y1="0" x2="630.5882352941177" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="658.8235294117648" y1="0" x2="658.8235294117648" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="678.8235294117646" y1="0" x2="678.8235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="707.0588235294117" y1="0" x2="707.0588235294117" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="727.0588235294117" y1="0" x2="727.0588235294117" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="755.2941176470588" y1="0" x2="755.2941176470588" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="775.2941176470588" y1="0" x2="775.2941176470588" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="803.5294117647059" y1="0" x2="803.5294117647059" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="823.5294117647059" y1="0" x2="823.5294117647059" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="851.7647058823529" y1="0" x2="851.7647058823529" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="871.7647058823529" y1="0" x2="871.7647058823529" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="900" y1="0" x2="900" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
    </g>
    <g class="textgroup">
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect0" x="0" y="120" width="1000.00" height="44" fill="red">0</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect1" x="0" y="184" width="1000.00" height="44" fill="red">1</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect2" x="0" y="248" width="1000.00" height="44" fill="red">2</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect3" x="0" y="312" width="1000.00" height="44" fill="red">3</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect4" x="0" y="376" width="1000.00" height="44" fill="red">4</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect0" x="102" y="12" width="28.235294117647058" height="500.00" fill="red">0</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect1" x="150.23529411764707" y="12" width="28.235294117647058" height="500.00" fill="red">1</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect2" x="198.47058823529412" y="12" width="28.235294117647058" height="500.00" fill="red">2</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect3" x="246.70588235294116" y="12" width="28.235294117647058" height="500.00" fill="red">3</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect4" x="294.94117647058823" y="12" width="28.235294117647058" height="500.00" fill="red">4</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect5" x="343.1764705882353" y="12" width="28.235294117647058" height="500.00" fill="red">5</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect6" x="391.4117647058823" y="12" width="28.235294117647058" height="500.00" fill="red">6</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect7" x="439.6470588235294" y="12" width="28.235294117647058" height="500.00" fill="red">7</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect8" x="487.88235294117646" y="12" width="28.235294117647058" height="500.00" fill="red">8</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect9" x="536.1176470588235" y="12" width="28.235294117647058" height="500.00" fill="red">9</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect10" x="584.3529411764706" y="12" width="28.235294117647058" height="500.00" fill="red">10</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect11" x="632.5882352941177" y="12" width="28.235294117647058" height="500.00" fill="red">11</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect12" x="680.8235294117646" y="12" width="28.235294117647058" height="500.00" fill="red">12</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect13" x="729.0588235294117" y="12" width="28.235294117647058" height="500.00" fill="red">13</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect14" x="777.2941176470588" y="12" width="28.235294117647058" height="500.00" fill="red">14</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect15" x="825.5294117647059" y="12" width="28.235294117647058" height="500.00" fill="red">15</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect16" x="873.7647058823529" y="12" width="28.235294117647058" height="500.00" fill="red">16</text>
    </g>
    <g class="xlinesGroup">
        <line x1="100" y1="100" x2="900" y2="400" stroke="#F906E3" stroke-width="0.5"/>
        <line x1="900" y1="100" x2="100" y2="400" stroke="#F906E3" stroke-width="0.5"/>
    </g>
    <g class="placeholders">
        <svg width="1000.00" height="500.00">
            <rect x="678.8235294117646" y="356" width="172.94117647058823" height="44" fill="#dbe4cd" class="placeholderRect" opacity="0.5"/>
        </svg>
        <svg width="1000.00" height="500.00">
            <rect x="389.4117647058823" y="228" width="124.70588235294117" height="172" fill="#dbe4cd" class="placeholderRect" opacity="0.5"/>
        </svg>
    </g>
</svg>
bsweeney commented 1 year ago

What is your expectation for the SVG? The image is rendered appropriately. Are you expecting the PDF objects to be grouped similarly (functionality that was not a focus when this library was developed)?

wsimm commented 1 year ago

@bsweeney My expectation for the SVG is to be converted to PDF without losing the structure of the SVG elements, including the grouping of elements. I understand that grouping functionality may not have been a focus during the development of the DomPDF library, but it would be helpful if the library could preserve the original structure of the SVG

bsweeney commented 1 year ago

You mean structurally within the PDF source, yes? Or are you expecting some kind of rendering compliment that would make the grouping more functional?

I'll tag as an enhancement though I couldn't say when somebody might look at this.

wsimm commented 1 year ago

@bsweeney Actually, I don't need any additional features. My main concern is to export the SVG as-is, preserving its structure. The reason this matters is that when I download the PDF which has been converted using DOMPDF and then open it with Adobe Illustrator, I don't want to lose the grouping feature of the SVG. So, maintaining the SVG structure during the conversion process is essential for my use case.

bsweeney commented 1 year ago

Thanks for the follow up that definitely clarifies the use case.