那些遇到过的问题

创建包含形状文本的雪花形状

Per*_*ijn 12 html css svg html5-canvas css-shapes

我想在冬季为我的网页创建一个雪花.

我尝试的第一件事是使用SVG创建它:

在此输入图像描述

<h3>Koch Snowflake Frac</h3>
<svg viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg">
  <polyline stroke="cornflowerblue" stroke-width="2" fill="rgba(255,255,255,0.5)" points="55 5, 
                    60 10, 
                    65 10, 
                    65 15,
                    70 20,
                    75 20,
                    80 15,
                    85 20,
                    90 20,
                    85 25,
                    90 30,
                    80 30,
                    75 35,
                    80 40,
                    90 40,
                    85 45,
                    90 50,
                    85 50,
                    80 55,
                    75 50,
                    70 50,
                    65 55,
                    65 60,
                    60 60,
                    55 65,
                    50 60,
                    45 60,
                    45 55,
                    40 50,
                    35 50,
                    30 55,
                    25 50,
                    20 50,
                    25 45,
                    20 40,
                    30 40,
                    35 35,
                    30 30,
                    20 30,
                    25 25,
                    20 20,
                    25 20,
                    30 15,
                    35 20,
                    40 20,
                    45 15,
                    45 10,
                    50 10,
                    55 5" />
  <foreignObject x="0" y="0" requiredExtensions="http://www.w3.org/1999/xhtml">

    <body xmlns="http://www.w3.org/1999/xhtml">
      <p>Here is a paragraph that requires word wrap</p>
    </body>
  </foreignObject>
</svg>
Run Code Online (Sandbox Code Playgroud)

我无法使<foreignObject>工作,即使我在IE浏览器中不支持它.
没有必要支持旧的IE浏览器,但我想至少支持其中一个.
顶部还有细微的细节,形状没有封闭.

然后我尝试用CSS创建一个雪花:

.snowflake {
  position: absolute;
  width: 200px;
  display: inline-block;
  border-bottom: 10px solid cornflowerblue;
  top: 200px;
  left: 100px;
  background-color: white;
}
.snowflake:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(45deg);
  top: -20px;
}
.snowflake:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(-45deg);
  top: 20px;
}
.smallbranch {
  position: absolute;
  right: 0px;
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(45deg);
  top: 17px;
  box-shadow: -130px -5px 0px 0px cornflowerblue;
}
.smallbranch:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(90deg);
  top: -22px;
  left: -22px;
  box-shadow: 130px -5px 0px 0px cornflowerblue;
}
.circle {
  position: absolute;
  left: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid cornflowerblue;
  background-color: white;
  transform: translate(-50%, -50%);
}
.circle:before {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(90deg);
  top: -52px;
  left: 20px;
  transform: rotate(-45deg);
}
.circle:after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 50px;
  border-bottom: 10px solid cornflowerblue;
  transform: rotate(90deg);
  top: 102px;
  left: 20px;
  transform: rotate(45deg);
}
.branch {
  position: absolute;
  display: inline-block;
  height: 200px;
  border-right: 10px solid cornflowerblue;
  left: 50%;
  top: -100px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="snowflake">
  <div class="branch"></div>
  <div class="smallbranch"></div>
  <div class="circle">Text in here</div>
</div>
Run Code Online (Sandbox Code Playgroud)

这是我使用CSS的最佳尝试.
现在这里显示文本但不在一行上.我的想法是在徽标或网页上的按钮中使用它.所以我认为我不需要在形状上使用换行功能,但如果有的话,这将是一个加号.

我想创建的形状:
在此输入图像描述

TL; DR
我想要的是形状中间带有文字的雪花.
我要求一个解决方案,文本可以是任何长度,仍然在形状内.
你不必创建一个与我尝试过的完全相同的形状,只要形状是一个雪花,中间有文字即可.我不知道文本会有多长,因此形状必须包含文本.

Jac*_*ray 8

玩这个演示

这实际上是一个非常有趣的问题,并且提出答案并不容易.

问题要求制作一个形状(在这种情况下是雪花),它将缩放以适合其中的文本.我的第一个建议是使用图像,而不是尝试使用CSS创建形状.图像更容易制作比例,并且可以比CSS形状具有更多细节.

所以,让我们展示如何实现这一目标.

首先,由于您希望元素按比例缩放以适合字体,因此我们需要创建元素display:inline-block.这将使它只有它的内容宽,不像block它会使它像它的父母一样宽,并且仍然能够设置高度(你不能用它做inline).

接下来,我们需要使元素的高度与宽度相同.幸运的是,CSS中有一个技巧可以让你做到这一点.元素的填充是根据它的宽度计算的,因此如果将padding-bottom(或padding-top)设置为100%,它将具有与height相同的宽度.(有关详细信息,请参阅此优秀的SO答案).

在此之后,只需要将文本集中在雪花内部,这可能需要稍微玩一下这些值以适合您的字体系列.

如果你想要jsfiddle代码: JSFiddle Demo

全屏JSFiddle演示

在Chrome,FireFox,IE和Safari中测试过.某些字体系列可能需要进行微调

.snowflake{
    display:inline-block;
      background:url("http://i.imgur.com/4M9MH1Q.png") scroll no-repeat center/contain;
    }
/*This is for setting the height the same as the width, a 1:1 ratio. more info http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
    .snowflake:after{
    	content: "";
    	display: block;
    	padding-top: 100%;
    }
    .snowflake span{
        display:inline-block;
        -webkit-transform: translateY(110%);
            -ms-transform: translateY(110%);
                transform: translateY(110%);
        width:100%;
        text-align:center;
       padding-top:20%;
      }
/*This part is ugly, but it is required to work in chrome or IE, you may have to change the char for different font types*/
 .snowflake span:before, .snowflake span:after{
     content:"aaa";
     visibility:hidden;
     opacity:0;
  }
Run Code Online (Sandbox Code Playgroud) 
        Font-size 12pt:
    <div class="snowflake" style="font-size:12pt;">
      <span>It's Snowing!</span>
    </div>
    Font-size 24pt:
    <div class="snowflake" style="font-size:24pt;">
      <span>It's Snowing!</span>
    </div>
    Font-size 48pt:
    <div class="snowflake" style="font-size:48pt;">
      <span>It's Snowing!</span>
    </div>
Run Code Online (Sandbox Code Playgroud)

编辑:此解决方案更漂亮,但在Chrome或IE中无效

.snowflake{
display:inline-block;
  background:url("http://i.imgur.com/4M9MH1Q.png") scroll no-repeat center/contain;
}
/*This is for setting the height the same as the width, a 1:1 ratio. more info http://www.mademyday.de/css-height-equals-width-with-pure-css.html#outer_wrap */
.snowflake:after{
	content: "";
	display: block;
	padding-top: 100%;
}
.snowflake span{
  display:inline-block;
    transform: translateY(90%);
  padding:20%;
  }
Run Code Online (Sandbox Code Playgroud) 
Font-size 12pt:
<div class="snowflake" style="font-size:12pt;">
  <span>It's Snowing!</span>
</div>
Font-size 24pt:
<div class="snowflake" style="font-size:24pt;">
  <span>It's Snowing!</span>
</div>
Font-size 48pt:
<div class="snowflake" style="font-size:48pt;">
  <span>It's Snowing!</span>
</div>
Run Code Online (Sandbox Code Playgroud)

这项工作的主要条件是:

.snowflake 一定是 display:inline-block;

全屏JSFiddle演示

  • 在查看此内容时,Chrome上的文字显示为两行 (2认同)

Ste*_*ide 5

我的解决方案使用SVG部分，HTML / CSS部分来创建所需的效果。

我已经将calc()CSS3函数与基于视口的宽度/高度单位一起使用，然后再赋予它所需的响应度。

当元素的宽度大于200px时，它看起来要好得多。

代码

.container {
  position: relative;
  overflow: auto;
  display: block;
  width: 50vw;
  height: 50vw;
}
.container svg {
  width: 100%;
  height: 100%;
  position: absolute;
}
p {
  position: absolute;
  z-index: 100;
  background: white;
  left: 17.5vw;
  top: 17.5vw;
  margin: 0;
  padding: 10px 0;
  width: 10vw;
  text-align: center;
  font-size: 2vw;
  border: 20px solid black;
}
@media screen and (min-width: 920px) {
  p {
    font-size: 3vw;
    width: 12.5vw;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve" width="50%">
    <polygon id="christmas-snowflake-icon" points="441.535,346.644 373.955,307.624 438.697,290.354 431.342,262.782 338.967,287.424
284.535,255.999 339.49,224.271 431.299,249.242 438.787,221.705 374.311,204.168 441.535,165.356 427.266,140.644 359.686,179.66
377.1,114.956 349.545,107.541 324.697,199.861 270.27,231.285 270.27,167.831 337.797,100.809 317.695,80.554 270.27,127.624
270.27,50 241.732,50 241.732,128.036 194.404,80.604 174.203,100.76 241.732,168.438 241.732,231.286 186.779,199.558
162.498,107.565 134.906,114.847 151.957,179.455 84.732,140.644 70.465,165.356 138.045,204.373 73.303,221.645 80.66,249.218
173.035,224.574 227.465,255.999 172.51,287.727 80.701,262.758 73.211,290.293 137.688,307.832 70.465,346.644 84.732,371.356
152.312,332.337 134.898,397.042 162.457,404.459 187.303,312.137 241.732,280.711 241.732,344.169 174.203,411.191
194.307,431.446 241.732,384.376 241.732,462 270.27,462 270.27,383.964 317.598,431.396 337.797,411.24 270.27,343.562
270.27,280.712 325.223,312.439 349.502,404.435 377.094,397.15 360.043,332.545 427.268,371.356 "></polygon>
  </svg>
  <p>This is some text Now</p>
</div>
Run Code Online (Sandbox Code Playgroud)

密码笔

归档时间：

查看次数：

1395 次

最近记录：

9 年，1 月 前
使用CSS保持div的宽高比 996
创建一个24个或更高点爆发的"新"尖刺标签 15
更多相关链接
相关归档
如何使用CSS或Jquery覆盖left:0？ 103
使用DOM将SVG元素添加到现有SVG 71
Pass a javascript variable value into input type hidden value 62
如何在CSS中指定表填充？(表,不是单元格填充) 59
是否可以盲目地使用<strong>代替<b>？ 46
除了允许之外,删除所有HTML标记 31
如何使SVG元素透明(使用SVGweb) 6
是否可以更准确地测量SVG文本高度？ 6
动态添加完整的svg形状(使用纯Javascript) 1
是否可以引用一次svg文件,然后多次使用它？ 0
难疑归档
数据库索引如何工作？ 2335
在JavaScript中验证十进制数 - IsNumeric() 2318
如何以MS Word保留格式和语法高亮显示代码片段？ 1877
如何将Git托管项目中的所有本地更改还原到以前的状态？ 1830
如何在JavaScript中将数字格式化为美元货币字符串？ 1711
PowerShell说"在这个系统上禁用了脚本的执行." 1545
如何完全删除使用init创建的git存储库？ 1358
我是否提交了由npm 5创建的package-lock.json文件？ 1164
我怎样才能用Python代表'Enum'？ 1146
如何查找Python中是否存在目录 1048