我试图达到类似的效果，兰多诺里斯的网站，他的成就水平滚动。我尝试通过创建svg图像，然后在css的帮助下格式化它们来重新创建它。不过，它似乎在大多数浏览器上都不起作用。我应该改变我的方法在重新创建这个水平横幅或有一种方法，使图像显示正确?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PawelosFPV achievements</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
position: relative;
}
:root {
font-family: "PT Sans", sans-serif;
font-size: 20px;
}
body {
background-color: #EFF1ED;
min-height: 100vh;
}
h1 {
color: #161032;
font-family: "Baloo Tamma", sans-serif;
font-size: 1.5rem;
}
h1::after {
background-color: #00A8E8;
bottom: 0;
content: "";
display: block;
height: 0.25rem;
position: absolute;
width: 1rem;
}
p {
color: rgba(0, 0, 0, 0.8);
}
.container {
margin: 0 auto 2rem;
max-width: 900px;
padding: 0 1.5rem;
}
.sample-item {
width: auto;
height: 125px;
vertical-align: middle;
padding-right: 20px;
}
.horizontal-scrolling-banner {
overflow: hidden;
}
.horizontal-scrolling-banner__helper-wrapper {
align-items: center;
display: flex;
left: 0;
transform: translateZ(0);
transition-property: left;
transition-timing-function: linear;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
</div>
<div class="horizontal-scrolling-banner">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Riga-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Modena-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Sumo-Challange-2018.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Junior-Championship-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Polish-Championship-2019-V2.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Salina-Turda-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-VADUZ-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-TURIN-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/VICE-FAI-World-Cup-Ranking-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DCL-Laax-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/IDSC-Korea-Yeongwol.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/EPFL-FAI-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/XFLY-Tianjin-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/FAI-World-Drone-Cup-Partouche-2019.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/DRL-Tryouts-2020.svg" class="sample-item">
<img src="http://pawelosfpv.com/wp-content/uploads/2022/05/Drone-Champions-League-2020.svg" class="sample-item">
</div>
</div>
<!-- partial -->
<script>
(function horizontalScrollingBanner() {
var banners = document.getElementsByClassName('horizontal-scrolling-banner');
if (!banners || banners.length === 0) {
return;
}
var pxPerSecond = 25;
setUpElements();
scrollTheBanners();
window.addEventListener('resize', setUpElements);
function setUpElements() {
for (var i = 0; i < banners.length; i++) {
var currentBanner = banners[i];
var helperWrapperClass = 'horizontal-scrolling-banner__helper-wrapper';
var currentHelperWrapper = currentBanner.querySelector('.' + helperWrapperClass);
if (currentHelperWrapper) {
var clones = currentHelperWrapper.querySelectorAll('[data-clone]');
Array.prototype.forEach.call(clones, function(clone) {
clone.remove();
});
var childrenCount = currentHelperWrapper.children.length;
for (var i = 0; i < childrenCount; i++) {
currentBanner.appendChild(currentHelperWrapper.children[0]);
}
currentHelperWrapper.remove();
}
var children = currentBanner.children;
var bannerWidth = currentBanner.getBoundingClientRect().width;
var minWidthToCoverBanner = (bannerWidth * 2) + children[0].getBoundingClientRect().width;
var childrenWidth = Array.prototype.reduce.call(children, function(r, child) {
return r + child.getBoundingClientRect().width;
}, 0);
var currentWidth = childrenWidth;
do {
Array.prototype.forEach.call(children, function(child) {
var clone = child.cloneNode();
clone.setAttribute('aria-hidden', true);
clone.dataset.clone = true;
currentBanner.appendChild(clone);
});
currentWidth += childrenWidth;
} while (currentWidth < minWidthToCoverBanner);
var transitionHelperWrapper = document.createElement('div');
transitionHelperWrapper.classList.add('horizontal-scrolling-banner__helper-wrapper');
var childrenCount = children.length;
for (var i = 0; i < childrenCount; i++) {
transitionHelperWrapper.appendChild(children[0]);
}
currentBanner.appendChild(transitionHelperWrapper);
transitionHelperWrapper.dataset.childrenWidth = childrenWidth;
}
}
function scrollTheBanners() {
for (var i = 0; i < banners.length; i++) {
var helperWrapper = banners[i].firstElementChild;
var childrenWidth = helperWrapper.dataset.childrenWidth;
var offsetLeft = helperWrapper.offsetLeft;
if (offsetLeft <= (childrenWidth * -1)) {
helperWrapper.style.transitionDuration = '0s';
helperWrapper.style.left = '0px';
helperWrapper.style.removeProperty('transition-duration');
} else if (helperWrapper.style.left === '' || helperWrapper.style.left === '0px') {
setTimeout(function() {
helperWrapper.style.transitionDuration = (childrenWidth / pxPerSecond).toFixed() + 's';
helperWrapper.style.left = (childrenWidth * -1) + 'px';
}, 0);
}
}
requestAnimationFrame(scrollTheBanners);
}
})();
</script>
</body>
</html>字体不自动嵌入
svg中使用的本地安装字体不适用于您的网站/应用程序的用户，除非他们碰巧安装了这种特定的字体。
除了firefox通常拒绝使用本地字体文件由于安全策略(可以在设置中更改，如下所述:"自定义(系统安装)Firefox字体?">
一些选择:
- 在Illustrator中打开svg并将文本转换为(路径)轮廓，然后通过将文本转换为轮廓保存为svg，通过CTRLa和CTRLshiftO应该可以做到
- 通过
@font-face使用数据URL嵌入字体。像transfonter这样的工具可以帮助
您还应该考虑使用开源字体替代方案，例如SIL OFL v1.1许可的"D-Din"font squirrel
仍然奇怪的字母间距?
Illustrator经常将文本元素拆分为单独的<text>或<tspan>元素。这通常是由自定义的间距/字距值引起的。
<text class="cls-1" transform="translate(133.05 117.67)">2018</text>
<text class="cls-2" transform="translate(143.07 61.95)">1<tspan class="cls-3" x="19.99" y="0">S</tspan>
<tspan x="39.83" y="0">T</tspan>
</text><text class="cls-4" transform="translate(57.23 179.3)">SUMO CHAL<tspan class="cls-5" x="147.92" y="0">L</tspan>
<tspan x="162.25" y="0">ANGE</tspan>
</text>
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
示例:嵌入式与非嵌入式字体
img,
svg{
height:200px
}<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700" rel="stylesheet">
<p>Font embedded</p>
<img src="https://svgshare.com/i/iW8.svg" class="sample-item">
<p>Font not embedded (fallback font is used)</p>
<img src="https://svgshare.com/i/iY4.svg" class="sample-item">
<p>Inline SVG - using Webfont (Roboto)</p>
<svg id="Achievement" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 185">
<defs>
<style>
text {
font-family: 'Roboto Condensed', sans-serif;
font-size: 32px;
font-weight: bold;
}
</style>
</defs>
<path id="wreath" d="M2.4 88.7c0-0.3 8.9 0.8 20.8 12.8a58.6 58.6 0 0 1-4.3-8.9c-13.4-3.7-15.9-9.4-19-19.5c1.3 2.6 10.3 4.8 12.7 9c1.8 3.3 3.8 6.4 5.5 8a51.4 51.4 0 0 1-1.9-8.3c-0.1-0.5-0.1-0.9-0.2-1.3c-4.4-2.2-14.6-9.4-15.3-23.2c2 2.9 9.3 2.6 14.9 18.5a82.9 82.9 0 0 1 0.2-9.3c-4.3-3.5-12.5-13.9-11-35c1.7 3.3 10.4 14.3 10.8 21.9a60.7 60.7 0 0 0 0.8 7.3c0.1-0.6 0.1-1.1 0.2-1.7a67.3 67.3 0 0 1 1.6-8.2a26.1 26.1 0 0 0-4.7-10.9a9.8 9.8 0 0 1-1.1-11c1.2-2.6 0.6-8.5 0.6-8.5s8.2 8.2 6.1 27.4a61.7 61.7 0 0 1 2.7-6.9a15.3 15.3 0 0 0-1.3-8.7c-2.2-4.7-4.8-12 1.3-22.9c0.1 4.3 3.8 11.4 3.4 16.9a76.8 76.8 0 0 1-1.8 11.5a57.8 57.8 0 0 1 3.7-6c0.3-2.9-1.1-7-0.9-14.2c0.2-8.7 4-10.5 4.9-15.2c3.4 9 1.5 19.4-1.2 25.6l0.8-1c0.9-1.2 1.8-2.3 2.6-3.4a35.1 35.1 0 0 1 3.7-15.4c1.7-3 6.8-5.5 6.9-8c1.3 9.3-3.2 15.6-7.3 20.2l0 0.1a14.6 14.6 0 0 1 16-2.8s-5.3 4.9-9.7 5.3c-4.2 0.3-6.3 0-8.6 1.4c-0.7 1-1.6 2.1-2.5 3.2c5.7-3.1 14.2-0.1 17.5 2c-4.8 3.8-9.6 2.9-12.3 1.1c-2.4-1.6-5.2-0.1-6.9-0.9a70.2 70.2 0 0 0-4.4 6.3a61.2 61.2 0 0 0-3.7 7.8c3.1-4.4 8.5-9.7 15.3-9.9c-0.2 2.8-3.3 8.2-7.7 10.7c-3.6 2-7.3 2.9-9.4 4.7a65.1 65.1 0 0 0-2 10v0.1c4-10.1 15.2-14.7 18.2-14.9c0 0-5 3.6-5.3 8.3s-4.8 7.2-8.8 8.5a8.8 8.8 0 0 0-4.7 4.1a77.5 77.5 0 0 0 0 12.9c1.3-19.3 14.5-19.3 14.5-19.3a7.8 7.8 0 0 0-2.4 5c-0.4 3.4-1.2 6.1-5.3 10.6a21 21 0 0 0-5.5 11.3a54 54 0 0 0 5.8 13.9c-2.4-6-3.9-14.4-0.8-21.7c0.5 4.2 6.8 10.4 6.8 15.6c0 4.5-1.8 10.4-0.3 14.2c0.8 0.9 1.6 1.9 2.5 2.8c-0.4-2.7-0.1-6.7-0.7-9.5c1.5 2.2 2.4 8.2 3.4 12.3a71 71 0 0 0 6 5.1c-5.1-6-7.7-15.7-6.6-24.8c3.7 3.6 8.7 11.1 8.9 16.9a28.1 28.1 0 0 0 3.7 11.9l1.1 0.6c1.1 0.6 2.3 1.2 3.4 1.7c-5.6-5-7-14.1-7-18.1c6.3 4.4 13 14.6 13.8 20.6c1.2 0.3 2.4 0.6 3.6 0.9c4.8 0.9 10.2 1 14.5-1.3l0.3 0.5h0l0.3 0.5l0.5 1c-5.1 2.6-10.9 2.5-16 1.5a47.4 47.4 0 0 1-5.5-1.5c-2.3 3.8-8.5 7.2-12.4 6.8s-8.2-2.4-10.9-1.5c3.6-6 9.8-7.7 13.9-6.3c3.6 1.2 6.1 1.6 8 0.5a56.2 56.2 0 0 1-7.5-3.4l-1-0.5c-4.9 3-11.2 2.5-15.3 1.1c-4.6-1.5-6.3-6.1-10.1-8.1c9.6-2.5 14.8 0.9 17 3a9.8 9.8 0 0 0 6.5 2.9a66.4 66.4 0 0 1-10.3-7.9c-2.7-0.1-8.3 1.7-12.4-1.7c4-1.3 7.1-1.7 9.8-0.9c-0.9-0.9-1.7-1.8-2.5-2.8c-3.1 0.1-8.7 2-13-0.4a70.7 70.7 0 0 1-10.9-8.1s7.3-0.3 11.2 0.7c-3.6-2-14.3-13.4-14.3-13.7z" />
<use href="#wreath" style="transform: translate(100%,0) scale(-1, 1);" />
</use>
<text x="50%" y="30%" text-anchor="middle" dominant-baseline="central">2022<tspan x="50%" data-dx="50%" dy="15%">1ST</tspan></text>
<text x="50%" y="90%" text-anchor="middle" dominant-baseline="central">
AWARD
</text>
</svg>内联svg(附加到你的html体)可以使用webfonts通过@font-face加载。不幸的是，您的carousel脚本显然只支持单个元素(没有嵌套的子节点)。