展開SVG形狀高度以匹配內容

我創建了一個SVG形狀，其中包含各種基於文本的內容，範圍介於1-8行之間。我已經創建了我的形狀和內容，但是我正在使用position:absolute;規則將內容拖入SVG。這意味着如果我添加更多的內容，形狀不會擴大。展開SVG形狀高度以匹配內容

這是可能的使用SVG元素，我看着使用text標籤，但它似乎文本分成單行，並繪製在一個特定的X，Y，我不相信將工作在我的情況。

<div class="wrp"> 
<svg viewBox="0 0 1416 200"> 
    <path d="M1337.59107,-1.0658141e-14 L0,-1.0658141e-14 L0,325 L1027.36348,325 L1337.59107,-3.90798505e-14 Z" id="Combined-Shape" stroke="none" fill="#9DC8F2" fill-rule="evenodd"></path> 
</svg> 
<div class="img-wrp"> 
    <img src="https://www.maxizoo.fr/wp-content/uploads/2016/06/aliments-hamster.jpg" alt=""> 
</div> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-10 col-md-offset-1"> 
     <div class="caption-wrp"> 
     <div class="item"> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales, odio ut egestas egestas, orci neque interdum sem, at malesuada enim tellus eget dui. 
      </p> 
      <span>Name</span> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div>

這就是我如何拉內容;

.caption-wrp{ 
    padding:0px 50px; 
    text-align: center; 
    position: absolute; 
    top: -100px; 
    z-index: 999; 
    color: #fff; 
}

的jsfiddle - https://jsfiddle.net/783ob55u/2/

一切我讀到SVG（視圖框）表明其吸引到一個固定的大小。

編輯 - 什麼我想要實現實例（而不是內容的大小會發生變化） -

來源

2017-03-07 SamXronn

也許你可以在你的文本容器中使用SVG作爲背景圖像？ – domsson

這個應該是什麼樣子的一些想法是有用的。倉鼠圖像的目的是什麼？ –

道歉，我更新了原帖。 – SamXronn

我試圖給你另一種解決辦法，如果我的理解也應該是一個很好的基礎，得到你想要的。該圖像並非完全符合該目的，因此您可能希望找到另一個圖像或使用一組2個圖像來切換媒體查詢。

看一看這裏：http://codepen.io/anon/pen/JWyeQN

.box { 
    position: relative; 
    margin-top: 10%; 
    padding: 1.5em 20% 1.5em 1em; 
    background-color: #69f; 
    overflow: hidden; 
} 
.right-corner { 
    background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcS7XbUc4oQQ0d0Ig4DvKipwx81Jk2B6FTsD7iyZCMS6tHBhHEQ7) no-repeat right top; 
    background-size: cover; 
    width: 20%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 
svg { 
    height: 100%; 
    width: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
polygon { 
    fill:#69f; 
}

整個包裝響應和文本塊也和右邊界總是會覆蓋容器的100％的高度。

讓我知道，如果有什麼不是很清楚。

希望它有幫助！

來源

2017-03-15 03:45:57 antoni

嗨，謝謝你的回答！這太好了，我只有一個問題，我已經將你的答案轉移到了小提琴上。你能告訴我爲什麼當使用引導網格系統時，圖像和三角形重疊內容而不是推開它。 http://jsfiddle.net/n4osu39f/1/ – SamXronn

@SamXronn，我的榮幸。對於bootstrap上的重疊，我需要看到你使用的那段代碼，你能更新你的js小提琴嗎？順便說一句，你爲什麼複製我的審判jsfiddle？是不是你的哈巴狗？ :) – antoni

是的，帕格的東西嚇倒了我，我想包括一個外部庫;）。上面的提琴帖子顯示了我所有的代碼，但是如果您調整瀏覽器的大小或縮放輸出窗口，您會看到右側的圖像與內容重疊。謝謝 – SamXronn

我想你應該圖像定位你作爲position: absolute;，讓文本，以它的實際高度。看看我爲你做的這個例子。

jsFiddle

來源

2017-03-09 16:33:56

展開SVG形狀高度以匹配內容

回答

相關問題