PptxGenJs: Как экспортировать SVG в PPT - PullRequest
Новая
       42

PptxGenJs: Как экспортировать SVG в PPT

0 голосов
/ 24 сентября 2019

У меня проблемы с использованием библиотеки PpptxGenJS для экспорта изображений SVG, сгенерированных веб-приложением.

Существует 2 требования:

  1. Возможность экспортировать изображения SVG для отчетов(pptx's)
  2. Применение CSS к SVG перед экспортом

Ниже приведены два простых SVG, которые при добавлении на страницу HTML отображаются без проблем:

enter image description here

Вот HTML и, как вы можете видеть, довольно просто 

<html>
<head>
<style>
    g.nv-legend text {
        font-weight: bold;
        font-size: 16px;
    }
</style>
</head>
<body>
<body>
    <h1>svg example</h1>
    <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="30px" width="300px"><g class="nv-legend legendClass"><g class="nv-defsWrap"><defs><pattern id="diagonalBlackStripes45" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes45Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><g id="check" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g><g id="alert" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g><g id="small_arrow_left" transform="translate(0, 2)"><path d="M 0 5 L 5 0 L 5 10 Z "></path></g><g id="small_arrow_right" transform="translate(0, 2)"><path d="M 0 0 L 5 5 L 0 10 Z"></path></g><g id="directions_car"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="opacity"><path d="M24 0H0v24h24V0zm0 0H0v24h24V0zM0 24h24V0H0v24z" fill="none"></path><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"></path></g><marker id="marker_stub_333" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="#333"></path></marker><marker id="marker_stub_red" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="red"></path></marker><marker id="marker_stub_green" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="green"></path></marker></defs></g><rect class="legend-rect" fill="#FFB256" stroke="transparent" shape-rendering="crispEdges" width="16" height="16" x="8" y="1.5"></rect><polygon class="legend-secondary-rect" fill="#8DC463" shape-rendering="crispEdges" points="16,0 16,16 0,16" transform="translate(8 1.5)"></polygon><text class="legend-text" alignment-baseline="central" text-anchor="start" fill="#000" size="250" x="37" y="9.5"><tspan text-anchor="start" alignment-baseline="central">My Super Legend</tspan></text></g></svg>
    </div>
    <div style="height: 150px">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" class="nvd3-svg"><g class="nvd3 nv-wrap nv-discreteBarWithAxes"><g transform="translate(225,24)"><g class="nv-defsWrap"><defs><pattern id="diagonalBlackStripes45" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes45Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><g id="check" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g><g id="alert" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g><g id="small_arrow_left" transform="translate(0, 2)"><path d="M 0 5 L 5 0 L 5 10 Z "></path></g><g id="small_arrow_right" transform="translate(0, 2)"><path d="M 0 0 L 5 5 L 0 10 Z"></path></g><g id="directions_car"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="opacity"><path d="M24 0H0v24h24V0zm0 0H0v24h24V0zM0 24h24V0H0v24z" fill="none"></path><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"></path></g><marker id="marker_stub_333" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="#333"></path></marker><marker id="marker_stub_red" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="red"></path></marker><marker id="marker_stub_green" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="green"></path></marker></defs></g><g class="nv-discrete nv-axis nvd3-svg"><g class="nvd3 nv-wrap nv-axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><g class="nv-axislabel" transform="translate(-35, 57) rotate(-90)"><text text-anchor="middle"></text></g><path class="domain" stroke="currentColor" d="M0.5,0.5V114.5"></path><g class="tick zero" opacity="1" transform="translate(0,57)"><line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-150" dy="0.32em">Total Score</text></g></g></g><g class="nv-linear nv-axis"></g><g class="nv-barsWrap nvd3-svg"><g class="nvd3 nv-discretebar" transform="translate(0,0)"><g class="nv-group" transform="translate(0, 9.193548387096769)"><g class="nv-barsWrap"><g class="nv-bar positive" transform="translate(0, 0)" style="fill: rgb(199, 215, 103); stroke: transparent; stroke-width: 0;"><rect rx="0" width="624" height="47.80645161290323"></rect></g><g class="nv-bar positive" transform="translate(0, 47.80645161290323)" style="fill: url(&quot;#diagonalBlackStripes45Thin&quot;); stroke: rgb(51, 51, 51); stroke-width: 1px;"><rect rx="0" width="412.8" height="47.80645161290323"></rect></g><g class="nv-overlap-bar" fill="url(#diagonalBlackStripes45Thin)" opacity="1" stroke="#333" stroke-width="1px" transform="translate(0, 0)"><rect rx="0" width="0" height="47.80645161290323"></rect></g><g class="nv-overlap-bar" fill="url(#diagonalBlackStripes45Thin)" opacity="1" stroke="#333" stroke-width="1px" transform="translate(0, 47.80645161290323)"><rect rx="0" width="0" height="47.80645161290323"></rect></g></g><g class="nv-linearLabelsWrap"><g class="nv-value-label-wrap" transform="translate(632.9921875, 13.528225806451616) rotate(0 16.0078125 10.375) scale(1)"><g class="nv-value-label" stroke="#333"><g class="nv-customlabel nv-linearLabel"><rect class="label-background" fill="transparent" stroke="transparent" stroke-width="0px" opacity="0.1" width="31.015625" height="20" x="0"></rect><use class="label-icon" xlink:href="#" fill="#000" stroke-width="0px" transform="translate(0, 0) scale(1)"></use><text class="label-text" text-anchor="start" fill="#000" x="0" y="10" dy="6.75">65.0</text></g></g></g><g class="nv-value-label-wrap" transform="translate(421.7921875, 61.33467741935485) rotate(0 16.0078125 10.375) scale(1)"><g class="nv-value-label" stroke="#333"><g class="nv-customlabel nv-linearLabel"><rect class="label-background" fill="transparent" stroke="transparent" stroke-width="0px" opacity="0.1" width="31.015625" height="20" x="0"></rect><use class="label-icon" xlink:href="#" fill="#000" stroke-width="0px" transform="translate(0, 0) scale(1)"></use><text class="label-text" text-anchor="start" fill="#000" x="0" y="10" dy="6.75">43.0</text></g></g></g></g><g class="compareLabelWrap" transform="translate(779.4921875, 32.80645161290323)"><g class="compareLabel positive"><g class="nv-customlabel nv-checkLabel"><rect class="label-background" fill="green" stroke="transparent" stroke-width="0px" opacity="0.1" width="81.015625" height="30" rx="15" x="0"></rect><use class="label-icon" xlink:href="#check" fill="green" stroke-width="0px" transform="translate(5, 5) scale(1)"></use><text class="label-text" text-anchor="start" fill="green" x="35" y="15" dy="6.75">22.0</text></g></g></g></g></g></g><g class="nv-zeroLine"><line x1="0" x2="0" y1="0" y2="114"></line></g><g class="nv-overlapLabelsWrap"></g></g></g></svg>
    </div>
</body>

Проблема в том, что когда я пытаюсьэкспортируйте svg, используя библиотеку PptxGenJS.

Легенда SVG экспортируется (но с потерей качества), и диаграмма вообще не экспортируется.

Вот снимок экрана слайда

enter image description here

Код для создания слайда: 

private createChartsTestSlide(pptx: PptxGenJS) {
    let slide = pptx.addNewSlide(this.REPORT_MASTER_SLIDE);

    let portfolioLegendSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="30px" width="300px"><g class="nv-legend legendClass"><g class="nv-defsWrap"><defs><pattern id="diagonalBlackStripes45" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes45Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><g id="check" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g><g id="alert" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g><g id="small_arrow_left" transform="translate(0, 2)"><path d="M 0 5 L 5 0 L 5 10 Z "></path></g><g id="small_arrow_right" transform="translate(0, 2)"><path d="M 0 0 L 5 5 L 0 10 Z"></path></g><g id="directions_car"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="opacity"><path d="M24 0H0v24h24V0zm0 0H0v24h24V0zM0 24h24V0H0v24z" fill="none"></path><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"></path></g><marker id="marker_stub_333" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="#333"></path></marker><marker id="marker_stub_red" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="red"></path></marker><marker id="marker_stub_green" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="green"></path></marker></defs></g><rect class="legend-rect" fill="#FFB256" stroke="transparent" shape-rendering="crispEdges" width="16" height="16" x="8" y="1.5"></rect><polygon class="legend-secondary-rect" fill="#8DC463" shape-rendering="crispEdges" points="16,0 16,16 0,16" transform="translate(8 1.5)"></polygon><text class="legend-text" alignment-baseline="central" text-anchor="start" fill="#000" size="250" x="37" y="9.5"><tspan text-anchor="start" alignment-baseline="central">My Super Legend</tspan></text></g></svg>';
    portfolioLegendSvg = btoa(portfolioLegendSvg);
    slide.addImage({data: 'data:image/svg+xml;base64,'+portfolioLegendSvg, x:'18%', y:'20%', w: 2.75, h: 0.30});

    let chartSvg = '<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" class="nvd3-svg"><g class="nvd3 nv-wrap nv-discreteBarWithAxes"><g transform="translate(225,24)"><g class="nv-defsWrap"><defs><pattern id="diagonalBlackStripes45" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes45Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes135Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(135)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes225Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(225)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><pattern id="diagonalBlackStripes315Thin" x="0" y="0" width="5" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(315)"><rect width="1" height="8" transform="translate(0,0)" fill="#333" opacity="0.7"></rect></pattern><g id="check" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></g><g id="alert" transform="translate(-2, -2)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></g><g id="small_arrow_left" transform="translate(0, 2)"><path d="M 0 5 L 5 0 L 5 10 Z "></path></g><g id="small_arrow_right" transform="translate(0, 2)"><path d="M 0 0 L 5 5 L 0 10 Z"></path></g><g id="directions_car"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path><path d="M0 0h24v24H0z" fill="none"></path></g><g id="opacity"><path d="M24 0H0v24h24V0zm0 0H0v24h24V0zM0 24h24V0H0v24z" fill="none"></path><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"></path></g><marker id="marker_stub_333" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="#333"></path></marker><marker id="marker_stub_red" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="red"></path></marker><marker id="marker_stub_green" markerHeight="5" markerWidth="5" markerUnits="strokeWidth" orient="auto" refX="0" refY="0" viewBox="-1 -5 2 10"><path d="M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z" fill="green"></path></marker></defs></g><g class="nv-discrete nv-axis nvd3-svg"><g class="nvd3 nv-wrap nv-axis" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><g class="nv-axislabel" transform="translate(-35, 57) rotate(-90)"><text text-anchor="middle"></text></g><path class="domain" stroke="currentColor" d="M0.5,0.5V114.5"></path><g class="tick zero" opacity="1" transform="translate(0,57)"><line stroke="currentColor" x2="0"></line><text fill="currentColor" x="-150" dy="0.32em">Total Score</text></g></g></g><g class="nv-linear nv-axis"></g><g class="nv-barsWrap nvd3-svg"><g class="nvd3 nv-discretebar" transform="translate(0,0)"><g class="nv-group" transform="translate(0, 9.193548387096769)"><g class="nv-barsWrap"><g class="nv-bar positive" transform="translate(0, 0)" style="fill: rgb(199, 215, 103); stroke: transparent; stroke-width: 0;"><rect rx="0" width="624" height="47.80645161290323"></rect></g><g class="nv-bar positive" transform="translate(0, 47.80645161290323)" style="fill: url(&quot;#diagonalBlackStripes45Thin&quot;); stroke: rgb(51, 51, 51); stroke-width: 1px;"><rect rx="0" width="412.8" height="47.80645161290323"></rect></g><g class="nv-overlap-bar" fill="url(#diagonalBlackStripes45Thin)" opacity="1" stroke="#333" stroke-width="1px" transform="translate(0, 0)"><rect rx="0" width="0" height="47.80645161290323"></rect></g><g class="nv-overlap-bar" fill="url(#diagonalBlackStripes45Thin)" opacity="1" stroke="#333" stroke-width="1px" transform="translate(0, 47.80645161290323)"><rect rx="0" width="0" height="47.80645161290323"></rect></g></g><g class="nv-linearLabelsWrap"><g class="nv-value-label-wrap" transform="translate(632.9921875, 13.528225806451616) rotate(0 16.0078125 10.375) scale(1)"><g class="nv-value-label" stroke="#333"><g class="nv-customlabel nv-linearLabel"><rect class="label-background" fill="transparent" stroke="transparent" stroke-width="0px" opacity="0.1" width="31.015625" height="20" x="0"></rect><use class="label-icon" xlink:href="#" fill="#000" stroke-width="0px" transform="translate(0, 0) scale(1)"></use><text class="label-text" text-anchor="start" fill="#000" x="0" y="10" dy="6.75">65.0</text></g></g></g><g class="nv-value-label-wrap" transform="translate(421.7921875, 61.33467741935485) rotate(0 16.0078125 10.375) scale(1)"><g class="nv-value-label" stroke="#333"><g class="nv-customlabel nv-linearLabel"><rect class="label-background" fill="transparent" stroke="transparent" stroke-width="0px" opacity="0.1" width="31.015625" height="20" x="0"></rect><use class="label-icon" xlink:href="#" fill="#000" stroke-width="0px" transform="translate(0, 0) scale(1)"></use><text class="label-text" text-anchor="start" fill="#000" x="0" y="10" dy="6.75">43.0</text></g></g></g></g><g class="compareLabelWrap" transform="translate(779.4921875, 32.80645161290323)"><g class="compareLabel positive"><g class="nv-customlabel nv-checkLabel"><rect class="label-background" fill="green" stroke="transparent" stroke-width="0px" opacity="0.1" width="81.015625" height="30" rx="15" x="0"></rect><use class="label-icon" xlink:href="#check" fill="green" stroke-width="0px" transform="translate(5, 5) scale(1)"></use><text class="label-text" text-anchor="start" fill="green" x="35" y="15" dy="6.75">22.0</text></g></g></g></g></g></g><g class="nv-zeroLine"><line x1="0" x2="0" y1="0" y2="114"></line></g><g class="nv-overlapLabelsWrap"></g></g></g></svg>';
    chartSvg = btoa(chartSvg);
    slide.addImage({data: 'data:image/svg+xml;base64,'+chartSvg, x:'18%', y:'30%', w: 8.0, h: 4.0});
}

Еще одна вещь, которую я заметил (в экспортированной легенде svg):потеря качества на изображении.Как будто он был преобразован из SVG во что-то еще, потеряв свойства SVG.

Можете ли вы, ребята, помочь мне понять:

  1. Почему второй svg не был экспортирован?
  2. Поддерживаются ли все функции svg, атрибуты?Какое ограничение имеет библиотека в отношении добавления изображений SVG?
  3. Почему потеря качества изображения?
  4. Возможно ли применить CSS к SVG?

Спасибо большое за помощь.Очень ценится.

...