个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 09:50:43 26 4
gpt4 key购买 nike

我想使用 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 属性。

我不知道我是否忽略了一些让它发挥作用的东西，但我已经到了智慧的尽头。

最佳答案

我想出了我的问题是什么:
-webkit-transform仅在用于 svg 时才适用于 IronPdf -Element 并且不在 circle 上工作-元素。

关于javascript - -webkit-transform CSS 属性在 IronPdf 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62018872/

26 4 0
文章推荐： typo3 - 未捕获的 TYPO3 异常 : Cannot use object of type __PHP_Incomplete_Class as array
文章推荐： laravel - 如果键值相同，如何合并 Laravel 集合？或添加新的数据行
文章推荐： scala - Spark : FlatMap and CountVectorizer pipeline
文章推荐： R caret extractPrediction 随机森林模型 : Error: $ operator is invalid for atomic vectors
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com