gpt4 book ai didi

javascript - 如何使用 jQuery 或 JavaScript 将内联 SVG 设置为随 CSS 一起拉伸(stretch)

转载 作者:行者123 更新时间:2023-11-28 08:45:41 24 4
gpt4 key购买 nike

我通常使用:

<style>
svg
{
height: 100%;
width: 100%;
}
</style>

设置内联 svg,例如:

<svg>
Content ...
</svg>

拉伸(stretch)并覆盖屏幕。我正在使用变换来缩放图像,类似于浏览器缩放。当我将图像弄脏时出现问题,因为它不在中心或不再拉伸(stretch)。这是因为我使用:

var documentX = $(document).width();
var documentY = $(document).height();

offsetX = (documentX / 2) - window.x;
offsetY = (documentY / 2) - window.y;

$("svg").offset({top:offsetY,left:offsetX});

根据用户在图像上单击的位置移动图像然后放大。如前所述,一旦缩小,我需要图像恢复到最初的状态。我希望这是有道理的......

我更喜欢 jQuery 解决方案,但是如果不存在这样的 jQuery 解决方案,JavaScript 解决方案也可以。我试过:

$("svg").css({"height":"100%","width":"100%"});

没有成功。这是我的 HTML 头:

<head>
<title>Main</title>

<style>
svg
{
height: 100%;
width: 100%;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script type="text/javascript">
$(document).mousemove(function(e) {
window.x = e.pageX;
window.y = e.pageY;
});
</script>

<script>
function init()
{
window.zoom = 1;
window.isZoomed = 0;
window.zoomScale = 3;
}

function scale()
{
if (window.isZoomed == 0)
{
var documentX = $(document).width();
var documentY = $(document).height();

offsetX = (documentX / 2) - window.x;
offsetY = (documentY / 2) - window.y;

$("svg").offset({top:offsetY,left:offsetX})

document.body.style.msTransform = "scale(" + (window.zoom * window.zoomScale) + ")";
window.zoom = window.zoom * window.zoomScale;
window.isZoomed = 1;
}
else
{
document.body.style.msTransform = "scale(" + (window.zoom / window.zoomScale) + ")";
window.zoom = window.zoom / window.zoomScale;
window.isZoomed = 0;

<!-- Need to stretch to fit window here -->
}
}
</script>
</head>

我基本上需要这样做

svg
{
height: 100%;
width: 100%;
}

但是在 JavaScript/jQuery 中 ???

最佳答案

你不需要使用 JavaScript,只要你的 SVG 有 viewbox属性,你可以只使用 CSS。正如您在以下示例中看到的,有一个 200 x 200 的 viewbox,但它正在填充一个 400px/400px 的 div。

示例:

.wrap {
width: 400px;
height: 400px;
border: 2px solid grey;
}
.wrap svg {
width: 100%;
height: 100%;
display: block;
}
<div class="wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
<rect x="0" y="0" width="150" height="150" rx="20" style="fill:#ff0000;" />
<rect x="50" y="50" width="150" height="150" rx="40" style="fill:#0000ff; fill-opacity:0.7;" />
</svg>
</div>

如果需要,您可以像这样在 jQuery 中设置 viewbox(显而易见,根据需要替换尺寸)。

$('svg')[0].setAttribute('viewBox', '0 0 200 200');

关于javascript - 如何使用 jQuery 或 JavaScript 将内联 SVG 设置为随 CSS 一起拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27596877/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com