-webkit-transform CSS 属性在 IronPdf 中不起作用

Question

我想使用 IronPdf

转换 ASP .NET 项目中的 html 页面

这是我给IronPdf的HTML：

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style type="text/css">
        .meter {
            width: 100%;
            height: 100%;
        }

        .circle {
            fill: none;
            -webkit-transform-origin: 50% 50%;
            -webkit-transform: rotateZ(-90deg) rotateX(180deg);
        }

        .outline, .mask {
            stroke: #F1F1F1;
            stroke-width: 30;
        }

        .range {
            stroke-width: 30;
        }
    </style>

</head>
<body>
    <div class="container">
        <h5 id="headline">Test Render</h5>
        <svg class="meter">
            <circle class="outline-curves circle outline" cx="50%" cy="50%" r="100"></circle>
            <circle class="low circle range" cx="50%" cy="50%" stroke="#FDE47F" r="100"></circle>
            <circle class="mask circle" cx="50%" cy="50%" r="100"></circle>
            <circle class="outline-ends circle outline" cx="50%" cy="50%" r="100"></circle>
            <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">70%</text>
        </svg>
    </div>
</body>
</html>
<footer>
    <script lang="text/javascript">
        /* Set radius for all circles */
        var r = 100;
        var circles = document.querySelectorAll('.circle');
        var total_circles = circles.length;
        for (var i = 0; i < total_circles; i++) {
            circles[i].setAttribute('r', r);
        }

        /* Set meter's wrapper dimension */
        var meter_dimension = (r * 2) + 100;
        var meters = document.querySelectorAll(".meter");
        for (var i = 0; i < meters.length; i++) {
            meters[i].style.width = meter_dimension + "px";
            meters[i].style.height = meter_dimension + "px";
        }

        /* Add strokes to circles  */
        var cf = 2 * Math.PI * r;
        var semi_cf = cf;
        var outlineCurves = document.querySelectorAll(".outline-curves")
        var lows = document.querySelectorAll(".low")
        var outlineEnds = document.querySelectorAll(".outline-ends");
        var masks = document.querySelectorAll(".mask");

        for (var i = 0; i < outlineCurves.length; i++) {
            outlineCurves[i].setAttribute("stroke-dasharray", semi_cf + "," + cf);
        }
        for (var i = 0; i < lows.length; i++) {
            lows[i].setAttribute("stroke-dasharray", semi_cf + "," + cf);
        }
        for (var i = 0; i < outlineEnds.length; i++) {
            outlineEnds[i].setAttribute("stroke-dasharray", 2 + "," + (semi_cf - 2));
        }

        function setGaugeValue(value) {
            var percent = value;
            var meter_value = semi_cf - ((percent * semi_cf) / 100);
            for (var i = 0; i < masks.length; i++) {
                masks[i].setAttribute("stroke-dasharray", meter_value + "," + cf);
            }
        }

        setGaugeValue(70);
    </script>
</footer>

下面是 C# 中用于 IronPdf 的设置：

var _renderer = new HtmlToPdf();
_renderer.PrintOptions.SetCustomPaperSizeInInches(8.5, 11);
_renderer.PrintOptions.PaperOrientation = PdfPrintOptions.PdfPaperOrientation.Portrait;
_renderer.PrintOptions.Title = "X";
_renderer.PrintOptions.EnableJavaScript = true;
_renderer.PrintOptions.RenderDelay = 5000; //ms
_renderer.PrintOptions.CssMediaType = PdfPrintOptions.PdfCssMediaType.Screen;
_renderer.PrintOptions.DPI = 300;
_renderer.PrintOptions.GrayScale = false;
_renderer.PrintOptions.FitToPaperWidth = true;
_renderer.PrintOptions.InputEncoding = Encoding.UTF8;
_renderer.PrintOptions.Zoom = 90;
_renderer.PrintOptions.ViewPortWidth = 1280;
_renderer.PrintOptions.CreatePdfFormsFromHtml = true;
_renderer.PrintOptions.MarginTop = 10; //millimeters
_renderer.PrintOptions.MarginLeft = 10; //millimeters
_renderer.PrintOptions.MarginRight = 10; //millimeters
_renderer.PrintOptions.MarginBottom = 10; //millimeters
_renderer.PrintOptions.FirstPageNumber = 1;

根据他们的文档，这应该有效：https://ironpdf.com/docs/questions/rotating-text/

当我在浏览器中尝试 HTML 时，它按预期工作，但是当 IronPdf 将其转换为 PDF 时，除 -webkit-transform CSS 属性外，其他一切正常。

我不知道我是否忽略了一些东西来让它发挥作用，但我已经无能为力了。

Answer 1

我知道我的问题是什么了：

-webkit-transform 仅在 IronPdf 中用于 svg-Element 且不适用于 circle-Element。

-webkit-transform CSS 属性在 IronPdf 中不起作用

-webkit-transform CSS property not working in IronPdf

html

javascript

css

c#

ironpdf

-webkit-transform CSS 属性 在 IronPdf 中不起作用

-webkit-transform CSS property not working in IronPdf

html

javascript

css

c#

ironpdf

-webkit-transform CSS 属性在 IronPdf 中不起作用