小编bas*_*ent的帖子
使用变换原点缩放 SVG 元素
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"></iframe>
<div class="wrp">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
polygon { fill: none; stroke-width: 0.5; stroke: #f00; }
</style>
</defs>
<g transform="translate( 0 12.5 ) scale( 1 )">
<polygon
points="
75,6.7
75,93.3
0,50
"
transform="rotate( -30 50 50 )"
/>
</g>
</svg>
</div>
<script src="origin.js"></script>
</body>
</html>我想在定义特定变换原点的同时使上面代码片段中的红色三角形放大。使用 SVG 中的旋转属性，我们可以做到这一点：
transform="rotate( -30 50 50 )"
第一个值：-30逆时针旋转元素。定义50 50变换原点（分别为 x 和 y）。我可以用 …
推荐指数
解决办法
查看次数
在 SVG 中“缩放”时如何保持 viewBox 居中？
我经常使用该viewBox属性来“缩放”一个 SVG 元素。缩放当然是通过对属性使用较低的宽度和高度值来实现的viewBox- 但是很难确定x和y值以保持场景居中。
下面是一个片段，其中viewBox="0 0 100 100". ( xy width height )这是我的起点。场景将按比例缩放并从左上角开始。
<head>
<link rel="stylesheet" href="https://codepen.io/basement/pen/oepKxY.css">
</head>
<body>
<iframe src="https://s.codepen.io/basement/debug/zdpVyV/PNAvYLZmJRQr"
id="grid"
></iframe>
<div class="wrp">
<!-- SVG relevant code below-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
width="100" height="100"
class="canvas"
>
<defs>
<style type="text/css">
circle {
fill: #0ff;
fill-opacity: 0.25;
stroke-width: 0.25;
stroke: #0ee;
}
</style>
</defs>
<circle cx="37.5" cy="50" r="25" />
<circle cx="62.5" cy="50" r="25" …推荐指数
解决办法
查看次数
当元素有多个类时,如何在switch语句中检查className
在下面的示例中,我只想单击选项以显示在警报中.我正在尝试使用switch语句来确定单击了哪个类.如果我的div不包含多个类,那么我的例子就可以了.我尝试classList.contains在我的switch语句中使用无济于事.有没有办法在不改变我对switch语句的使用的情况下实现这一点？
function optionClicked(){
switch( this.className ){
case 'option1':
alert( 'user clicked option1' );
break;
case 'option2':
alert( 'user clicked option2' );
break;
case 'option3':
alert( 'user clicked option3' );
break;
}
}
function optionTabs(){
var optionTabs = document.querySelectorAll( 'div' ),
i = 0;
for( i; i < optionTabs.length; i++ ){
optionTabs[ i ].addEventListener( 'click', optionClicked );
}
}
optionTabs();html {
background-color: #eee;
font-family: sans-serif;
}
div {
cursor: pointer;
margin: 1.1rem;
padding: 1rem;
background-color: #fff;
letter-spacing: 0.05rem; …推荐指数
解决办法
查看次数
随着浏览器宽度减小，增加元素填充
CSS中的默认填充行为符合预期，并且当浏览器宽度减小时不会增加。在摘要中，随着宽度的减小，填充的基于百分比的值将降低，如预期的那样。
html {
background-color: #f8f8f8;
font-family: Arial;
text-transform: uppercase;
}
h1 {
display: inline-block;
background-color: #fe0;
padding: 4%;
}<h1>Highlighted Text</h1>我已经学习了一些有趣的CSS技术，它们使用calc和vw，vh等值进行一些有趣的非标准行为。
我可以使用CSS 反转默认行为并增加填充，而宽度减小（或至少对此产生一种错觉）吗？
编辑：另外，我知道媒体查询，但我希望这种过渡像默认填充的工作方式一样平滑。
推荐指数
解决办法
查看次数
通过在JavaScript中连接2个字符串来设置'calc()'值不起作用
这是我遇到的问题的一个简单例子,但基本问题仍然存在:blue元素需要按照JavaScript中第3行的指定样式,但无法工作.我有一些变量和字符串在height这个元素的值中连接.该red元素是正确呈现的,但是当我连接这样的值以及如何修复时,为什么蓝色元素不起作用？
blue.style.height = 'calc( 100% -' + '2rem )';
这条线不起作用.
注意: 我必须在元素的calc值中连接多个变量和值.在保持将多个值串在一起的能力的同时,我可以做些什么来实现这一点？
var red = document.querySelector( '.red' ),
green = document.querySelector( '.green' ),
blue = document.querySelector( '.blue' );
red.style.height = 'calc( 100% - 2rem )';
blue.style.height = 'calc( 100% -' + '2rem )';* {
box-sizing: border-box;
margin: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: space-around;
padding: 1rem;
background-color: #f8f8f8;
}
div {
width: 5rem;
height: 5rem;
} …推荐指数
解决办法
查看次数