Material.js 的 JavaScript svg 比例问题

Question

我正在使用 Matter.js 开发 JavaScript 动画。这是链接：

https://codepen.io/Sergio-Escalona/pen/VwNrwbw

document.addEventListener("DOMContentLoaded", function () {
    // Basic setup
    let Engine = Matter.Engine,
        World = Matter.World,
        Bodies = Matter.Bodies,
        Body = Matter.Body;

    let engine = Engine.create();
    engine.world.gravity.y = 0; // No gravity for a space-like effect

    let render = Matter.Render.create({
        element: document.body,
        engine: engine,
        options: {
            width: window.innerWidth,
            height: window.innerHeight,
            background: 'transparent',
            wireframes: false // for sprite rendering
        }
    });

    // Create static walls
    let thickness = 50; // Ensures ducks don't escape through fast movements
    let wallOptions = { isStatic: true, restitution: 1.0 }; // Perfectly elastic collisions
    let ground = Bodies.rectangle(window.innerWidth / 2, window.innerHeight + thickness / 2, window.innerWidth, thickness, wallOptions);
    let leftWall = Bodies.rectangle(-thickness / 2, window.innerHeight / 2, thickness, window.innerHeight, wallOptions);
    let rightWall = Bodies.rectangle(window.innerWidth + thickness / 2, window.innerHeight / 2, thickness, window.innerHeight, wallOptions);
    let topWall = Bodies.rectangle(window.innerWidth / 2, -thickness / 2, window.innerWidth, thickness, wallOptions);

    World.add(engine.world, [ground, leftWall, rightWall, topWall]);

    // Function to add a new duck with random selection for black duck
    function addDuck() {
        let safeMargin = 100; // A margin to avoid spawning too close to the edge
        let radius = 25;
        // Randomly choose the texture for the duck
        let textureUrl = Math.random() < 0.9 ? 
            'https://assets.codepen.io/12210161/duckling-svgrepo-com.svg' : 
            'https://assets.codepen.io/12210161/duckling-svgrepo-com-bk.svg';
        let duck = Bodies.circle(Math.random() * (window.innerWidth - 2 * safeMargin) + safeMargin, Math.random() * (window.innerHeight - 2 * safeMargin) + safeMargin, radius, {
            restitution: 0.9,
            friction: 0.0,
            frictionAir: 0.0,
            density: 0.001,
            render: {
                sprite: {
                    texture: textureUrl,
                    xScale: 0.1,
                    yScale: 0.1
                }
            }
        });

        // Apply an initial force to ensure movement
        Body.applyForce(duck, {x: duck.position.x, y: duck.position.y}, {x: (Math.random() - 0.5) * 0.05, y: (Math.random() - 0.5) * 0.05});
        World.add(engine.world, duck);
    }

    document.getElementById("oneMoreBtn").addEventListener("click", addDuck);

    // Start the engine and renderer
    Engine.run(engine);
    Matter.Render.run(render);

    // Initially add a duck to start with
    addDuck();
});

我不知道为什么黑鸭子比普通鸭子小。 svg 文件尺寸（px）完全相同，我找不到问题出在哪里。

谁能帮我解决这个问题吗？

提前致谢！

我检查了 svg 文件，两者的大小完全相同。关于 Javascript 代码，我找不到超出渲染比例的任何内容，但我认为这不应该是问题。

Answer 1

如果您在浏览器选项卡中打开 SVG 文件，您会发现它们不一样。我不是在谈论尺寸或颜色，而是坐标 - 黑鸭子位于中心，与黄色/橙色鸭子不同，这导致了黑鸭子显示的问题。

您需要执行以下操作：

在您选择的文本编辑器中打开两个 SVG 文件
将
```
duckling-svgrepo-com-bk.svg
```
的样式复制到单独的文件中
将
```
duckling-svgrepo-com-bk.svg
```
的全部内容替换为
```
duckling-svgrepo-com.svg
```
的内容，这样黑鸭子现在与黄/橙鸭子相同
删除
```
path
```
的
```
circle
```
和
```
duckling-svgrepo-com-bk.svg
```
元素的内联样式，然后应用您在步骤 2 中复制到空文件中的
```
st
```
类
复制第 3 步中的样式，并保存您的
```
duckling-svgrepo-com-bk.svg
```
文件

这样做的结果是，黑鸭子 svg 现在与黄色/橙色鸭子完全相同（没有颜色），并且您的代码现在可以工作了。

这应该是你的黑鸭 SVG 的最终结果：

<?xml version="1.0" encoding="windows-1252"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 49 49" xml:space="preserve">
<style type="text/css">
    .st0{fill:#D77328;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#2C2F38;}
    .st3{stroke:#FFFFFF;stroke-miterlimit:10;}
</style>
<g>
<path d="M37.19,26.375c-0.999-1.983-2.486-3.818-4.687-5.119c-0.231-0.136-0.295-0.436-0.123-0.641   c1.116-1.332,4.669-5.868,4.669-9.615c0-6.075-4.925-11-11-11s-11,4.925-11,11c0,6,5.008,9.048,5.873,9.88   c0.086,0.082,0.13,0.186,0.128,0.305c-0.012,1.015-0.342,5.794-5.532,3.985c-1.398-0.487-2.64-1.341-3.686-2.387L5.888,16.84   c-0.469-0.469-1.239-0.409-1.634,0.125C2.92,18.768,0.431,23.017,1.048,29c0,0,0.366,16.187,11.604,19.514   C13.861,48.872,15.126,49,16.386,49h6.858c2.854,0,5.645-0.829,8.027-2.402c0.083-0.055,0.166-0.11,0.25-0.166   C38.085,42.017,40.75,33.439,37.19,26.375z"/>
<path class="st0" d="M47.538,10h-8.206h-2.335c0.03,0.33,0.05,0.662,0.05,1c0,2.351-1.398,5.011-2.716,6.997V18h5.871   c0.926,0,1.854-0.218,2.632-0.721c2.568-1.658,4.434-5.064,5.161-6.554C48.161,10.389,47.912,10,47.538,10z"/>
<circle class="st1" cx="28.048" cy="9" r="4"/>
<circle class="st2" cx="30.048" cy="10" r="2"/>
<path class="st3" d="M20.515,29.887c6.723-3.413,7.533,4.125,7.533,4.125c0,8.75-7,8-7,8   c-5.947,0-8.933-6.269-9.758-8.343c-0.138-0.346,0.071-0.727,0.434-0.808l0.377-0.084C15.006,32.132,17.863,31.233,20.515,29.887z"/>
</g>
</svg>

当然，您也可以调整 Javascript 代码以涵盖 SVG 文件不居中的情况，但这是更容易采取的方法。

Material.js 的 JavaScript svg 比例问题

问题描述投票：0回答：1

1个回答

最新问题

Material.js 的 JavaScript svg 比例问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1