小编Nan*_*rma的帖子

隐藏SVG会影响同一页面中的其他SVG样式

SVG在同一页面中加载了几次。SVG用于显示值的图形表示。想象一下一个地图，其中每个区域都使用颜色代码显示给定值。

在每个SVG中，对于每个区域，都会动态应用CSS类以匹配所需的SVG模式填充。

CSS样式和模式在SVG文件中定义。这是一个例子：

  <svg height="100" width="100">
    <style>
    /*  */
    .striped-pain-1 {fill: url(#striped-pain-1);}
    /*  */
    </style>
    <defs>
        <pattern id="striped-pain-1" width="4" height="1" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="2" style="stroke:#EABFD5; stroke-width:6"></line>
        </pattern>
    </defs>

Run Code Online (Sandbox Code Playgroud)

问题是（display:none例如）隐藏了其中的SVG时（从那里到页面底部），所有的SVG都松散了图案填充。

我做了一个简化的Plunker来显示问题。

https://plnkr.co/edit/F5TzOwDEzneHEW7PT3Ls?p=preview

我发现防止这种情况的唯一方法是ids为每个SVG 使用不同的模式，但是由于所有人都共享同一个文件，因此我不喜欢重复复制所有文件并为此重命名ID的解决方案。我想知道应该有更好的解决方案。

html css svg display

Dav*_*las

2019 06-27

5
推荐指数

1
解决办法

598
查看次数

ng-bootstrap-提前输入下拉宽度

我开始使用ng-bootstrap Typeahead组件，对此我感到非常满意。

我想实现的一件事是使下拉菜单项的宽度与输入字段的宽度相同，而默认行为将宽度与文本长度相对应。应该是基本的CSS ...

我在Plunker中创建了一个基本示例。

您可以注意到，所应用的样式将被忽略：

.dropdown-menu { width: 100%;}

Run Code Online (Sandbox Code Playgroud)

如果我使用浏览器开发工具，并且应用相同的工具，则会应用该工具。

使用CSS如何获得结果的任何想法？

css bootstrap-4 ng-bootstrap angular

Mom*_*omo

2018 07-19

5
推荐指数

3
解决办法

3440
查看次数

选中复选框时设置元素样式

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
    <span></span>
    <span></span>
</div>

Run Code Online (Sandbox Code Playgroud)

我想在选中复选框时设置样式范围.我试过下面的风格,但它不起作用.

input:checked ~ div span{
    background: red;
}

Run Code Online (Sandbox Code Playgroud)

input:checked~div span {
  background: red;
}

Run Code Online (Sandbox Code Playgroud)

<input type="checkbox" id="c1">
<label for="c1">c1</label>
<div>
  <span></span>
  <span></span>
</div>

Run Code Online (Sandbox Code Playgroud)

css

May*_*abi

2018 07-17

4
推荐指数

1
解决办法

103
查看次数

纯 CSS 画圆动画

我写了一个纯css画圆动画，但是动画的时候两个半圆之间有一点点空白。（当动画结束时，他们走了。）

谁能告诉我为什么会这样？

我的 HTML：

.circle__box {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  position: relative;
}

.circle__wrapper {
  width: 100px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.circle__wrapper--right {
  right: 0;
}

.circle__wrapper--left {
  left: 0;
}

.circle__whole {
  width: 160px;
  height: 160px;
  border: 20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top: 0;
  transform: rotate(-135deg);
}

.circle__right {
  border-top: 20px solid teal;
  border-right: 20px solid teal;
  right: 0;
  animation: circleRight 5s linear forwards;
}

.circle__left {
  border-bottom: 20px …

Run Code Online (Sandbox Code Playgroud)

html css animation geometry path

Nic*_*ole

2018 11-16

4
推荐指数

1
解决办法

8505
查看次数

Bootstrap带有按钮的4列行

我已经开始探索Bootstrap 4和HTML5/CSS了.我想创建一个文本区域,侧面有两个按钮(彼此水平居中):

我得到的代码如下:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<div class="container mt-2">
  <div class="row">
    <div class="col-10">
      <textarea class="form-control" rows="3" id="sent_text" placeholder="Just write some text.."></textarea>
    </div>
    <div class="col-2">
      <div class="row">
        <button class="btn btn-success btn-sm m-1" type="button">Send</button>
      </div>
      <div class="row">
        <button class="btn btn-info btn-sm m-1" type="button">Clear</button>
      </div>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

我已经创建了一个包含2列的行.第二列包含两行.这是正确的方法吗？

谢谢

html twitter-bootstrap bootstrap-4

wma*_*att

2018 07-11

3
推荐指数

1
解决办法

1538
查看次数