我想用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-transformCSS 属性外，一切都可以正常工作。
我不知道我是否忽略了一些东西来让它发挥作用，但我的智慧已经到了尽头。
我弄清楚了我的问题是什么：
-webkit-transform仅在svg元素上使用时才在IronPdf中工作，而不是在circle元素上工作。